<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>生活供水泵房监测</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background: #f5f7fa;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 1200px;
            margin: 40px auto;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.08);
            padding: 32px 24px 24px 24px;
        }
        .title {
            font-size: 22px;
            font-weight: bold;
            color: #1565C0;
            margin-bottom: 24px;
        }
        .section {
            margin-bottom: 28px;
        }
        .el-card__header {
            font-size: 16px;
            font-weight: 600;
            color: #303133;
        }
        .stat-row {
            display: flex;
            gap: 24px;
            margin-bottom: 16px;
        }
        .stat-card {
            flex: 1;
        }
        .device-table {
            margin-top: 12px;
        }
        .alert-table {
            margin-top: 12px;
        }
        .point-map {
            width: 100%;
            height: 320px;
            background: #f5f7fa url('pump-room-bg.png') center/cover no-repeat;
            border: 1px solid #ebeef5;
            border-radius: 8px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #909399;
            font-size: 18px;
        }
        .point-marker {
            position: absolute;
            width: 32px;
            height: 32px;
            background: #1565C0;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
            border: 2px solid #fff;
            box-shadow: 0 2px 8px rgba(21,101,192,0.15);
        }
        @media (max-width: 900px) {
            .stat-row {
                flex-direction: column;
                gap: 12px;
            }
        }
        .dashboard-flex {
            display: flex;
            justify-content: center;
            align-items: stretch;
            gap: 32px;
        }
        .dashboard-card {
            transition: transform 0.25s cubic-bezier(.4,2,.6,1);
            will-change: transform;
        }
        /* 移除悬浮放大效果 */
        /* .dashboard-card:hover {
            transform: scale(1.06);
            z-index: 2;
            box-shadow: 0 4px 24px 0 rgba(21,101,192,0.18);
        } */
        .dashboard-num {
            font-size: 22px;
            font-weight: bold;
            transition: color 0.3s;
        }
        .dashboard-anim {
            animation: fadeInUp 0.8s cubic-bezier(.4,2,.6,1);
            display: inline-block;
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .dashboard-vertical {
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        .alarm-stat-card {
            background: linear-gradient(90deg, #f5f7fa 60%, #e3f2fd 100%);
            border-radius: 14px;
            box-shadow: 0 2px 12px 0 rgba(21,101,192,0.06);
            padding-bottom: 18px;
        }
        .alarm-stat-title {
            font-size: 20px;
            font-weight: bold;
            color: #1a237e;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
        }
        .alarm-stat-row {
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
            margin-top: 18px;
            margin-bottom: 6px;
            gap: 12px;
        }
        .alarm-stat-item {
            flex: 1;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 1px 4px 0 rgba(21,101,192,0.04);
            padding: 18px 0 10px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 90px;
        }
        .alarm-stat-label {
            font-size: 15px;
            color: #607d8b;
            margin-bottom: 8px;
        }
        .alarm-stat-num {
            font-size: 36px;
            font-weight: bold;
            letter-spacing: 2px;
            line-height: 1.1;
            margin-bottom: 2px;
            transition: color 0.3s;
        }
        .alarm-total {
            color: #1a237e;
            text-shadow: 0 2px 8px #e3f2fd;
        }
        .alarm-unhandled {
            color: #C62828;
            text-shadow: 0 2px 8px #ffcdd2;
        }
        .alarm-handled {
            color: #2E7D32;
            text-shadow: 0 2px 8px #c8e6c9;
        }
        @media (max-width: 700px) {
            .alarm-stat-row {
                flex-direction: column;
                gap: 10px;
            }
            .alarm-stat-item {
                min-width: 0;
                width: 100%;
            }
        }
        .chart-container {
            width: 100%;
            height: 260px;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .chart-full {
            width: 100%;
            height: 100%;
            min-height: 180px;
        }
        .alarm-section-card {
            border: 2px solid #F56C6C !important;
            background: #FEF0F0 !important;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="title"><i class='bx bx-water'></i> 生活供水泵房监测</div>
            <el-tabs v-model="activeTab">
                <!-- 1. 机房列表 -->
                <el-tab-pane label="机房列表" name="list">
                    <el-table :data="rooms" border stripe size="small">
                        <el-table-column prop="name" label="机房名称" width="180"></el-table-column>
                        <el-table-column prop="temp" label="温度"></el-table-column>
                        <el-table-column prop="humidity" label="湿度"></el-table-column>
                        <el-table-column prop="noise" label="噪声"></el-table-column>
                        <el-table-column prop="waterLeak" label="水浸情况" width="100">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.waterLeak===true?'danger':'success'" size="mini" style="font-weight: bold; font-size: 12px;">{{scope.row.waterLeak===true?'水浸':'非水浸'}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="offline" label="是否有设备离线">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.offline ? 'danger' : 'success'" size="mini">{{scope.row.offline ? '是' : '否'}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="alert" label="是否有告警">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.alert ? 'danger' : 'success'" size="mini">{{scope.row.alert ? '是' : '否'}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="220">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="openBindDialog(scope.row)">绑定信息</el-button>
                                <el-button size="mini" type="success" @click="openPointDialog(scope.row)" style="margin-left:8px;">机房点位配置</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <!-- 2. 综合仪表盘 -->
                <el-tab-pane label="综合仪表盘" name="dashboard">
                    <div style="margin-bottom:18px;display:flex;align-items:center;gap:18px;">
                        <el-select v-model="dashboardRoom" placeholder="请选择机房" style="width:220px;">
                            <el-option v-for="room in rooms" :key="room.name" :label="room.name" :value="room.name"></el-option>
                        </el-select>
                    </div>
                    <div class="dashboard-vertical">
                        <el-card class="dashboard-card alarm-stat-card" shadow="hover" style="margin-bottom:28px;">
                            <div slot="header" class="alarm-stat-title">
                                <i class="el-icon-warning-outline" style="color:#C62828;margin-right:8px;"></i>告警统计
                            </div>
                            <div class="alarm-stat-row">
                                <div class="alarm-stat-item">
                                    <div class="alarm-stat-label">所有告警</div>
                                    <div class="alarm-stat-num alarm-total" id="alarm-total">0</div>
                                </div>
                                <div class="alarm-stat-item">
                                    <div class="alarm-stat-label">未处理</div>
                                    <div class="alarm-stat-num alarm-unhandled" id="alarm-unhandled">0</div>
                                </div>
                                <div class="alarm-stat-item">
                                    <div class="alarm-stat-label">已处理</div>
                                    <div class="alarm-stat-num alarm-handled" id="alarm-handled">0</div>
                                </div>
                            </div>
                        </el-card>
                        <el-card class="dashboard-card" shadow="hover" style="margin-bottom:28px;">
                            <div slot="header" style="display:flex;align-items:center;justify-content:space-between;">
                                <span>水池液位变化</span>
                                <div>
                                    <el-select v-model="dashboardPeriod" size="mini" style="width:70px;">
                                        <el-option label="日" value="day"></el-option>
                                        <el-option label="周" value="week"></el-option>
                                        <el-option label="月" value="month"></el-option>
                                    </el-select>
                                    <el-select v-model="dashboardTank" size="mini" style="width:90px;margin-left:8px;">
                                        <el-option v-for="tank in dashboardTanks" :key="tank" :label="tank" :value="tank"></el-option>
                                    </el-select>
                                </div>
                            </div>
                            <div class="chart-container">
                                <div :id="'liquid-chart'" class="chart-full"></div>
                            </div>
                        </el-card>
                        <el-card class="dashboard-card" shadow="hover">
                            <div slot="header" style="display:flex;align-items:center;justify-content:space-between;">
                                <span>管网压力变化</span>
                                <div>
                                    <el-select v-model="dashboardPeriod" size="mini" style="width:70px;">
                                        <el-option label="日" value="day"></el-option>
                                        <el-option label="周" value="week"></el-option>
                                        <el-option label="月" value="month"></el-option>
                                    </el-select>
                                    <el-select v-model="dashboardPressure" size="mini" style="width:90px;margin-left:8px;">
                                        <el-option v-for="pressure in dashboardPressures" :key="pressure" :label="pressure" :value="pressure"></el-option>
                                    </el-select>
                                </div>
                            </div>
                            <div class="chart-container">
                                <div :id="'pressure-chart'" class="chart-full"></div>
                            </div>
                        </el-card>
                    </div>
                </el-tab-pane>
                <!-- 3. 设备详情监控 -->
                <el-tab-pane label="设备详情监控" name="device">
                    <el-select v-model="selectedRoom" placeholder="请选择机房" style="margin-bottom:16px;width:220px;">
                        <el-option v-for="room in rooms" :key="room.name" :label="room.name" :value="room.name"></el-option>
                    </el-select>
                    <el-card class="section" shadow="hover" style="margin-bottom:18px;">
                        <div slot="header">水泵设备</div>
                        <el-table :data="filteredDevices.filter(d=>d.type==='水泵')" border stripe class="device-table" size="small">
                            <el-table-column prop="name" label="设备名称" width="120"></el-table-column>
                            <el-table-column prop="status" label="水泵状态" width="120">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.status==='启动'?'success':(scope.row.status==='停止'?'info':(scope.row.status==='故障'?'danger':'warning'))" size="mini">{{scope.row.status}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="mode" label="控制模式" width="100">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.row.mode" :type="scope.row.mode==='自动'?'success':'info'" size="mini">{{scope.row.mode}}</el-tag>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="temp" label="水泵温度"></el-table-column>
                            <el-table-column prop="noise" label="水泵噪声"></el-table-column>
                            <el-table-column prop="current" label="电流"></el-table-column>
                            <el-table-column prop="voltage" label="电压"></el-table-column>
                            <el-table-column label="远程控制" width="120">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="primary">启停</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                    <el-card class="section" shadow="hover" style="margin-bottom:18px;">
                        <div slot="header">环境信息</div>
                        <el-table :data="filteredDevices.filter(d=>d.type==='环境')" border stripe class="device-table" size="small">
                            <el-table-column prop="name" label="设备名称" width="120"></el-table-column>
                            <el-table-column prop="waterLeak" label="水浸情况" width="100">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.waterLeak===true?'danger':'success'" size="mini" style="font-weight: bold; font-size: 12px;">{{scope.row.waterLeak===true?'水浸':'非水浸'}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="noise" label="室内噪音" width="120">
                                <template slot-scope="scope">
                                    <span :style="{color: '#000000', fontSize: '13px'}">
                                        {{scope.row.noise}}
                                    </span>
                                    <el-tag :type="getNoiseStatusColor(scope.row.noise)" size="mini" style="margin-left: 5px; font-weight: bold;">
                                        {{getNoiseStatusText(scope.row.noise)}}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="temp" label="室内温度" width="120">
                                <template slot-scope="scope">
                                    <span :style="{color: '#000000', fontSize: '13px'}">
                                        {{scope.row.temp}}
                                    </span>
                                    <el-tag 
                                        :type="getTempStatusColor(scope.row.temp)" 
                                        size="mini" 
                                        :style="getTempStatusColor(scope.row.temp) === 'warning' ? 'margin-left: 5px; font-weight: bold; background-color: #FF8F00; border-color: #FF8F00; color: white;' : 'margin-left: 5px; font-weight: bold;'">
                                        {{getTempStatusText(scope.row.temp)}}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="humidity" label="室内湿度" width="120">
                                <template slot-scope="scope">
                                    <span :style="{color: '#000000', fontSize: '13px'}">
                                        {{scope.row.humidity}}
                                    </span>
                                    <el-tag 
                                        :type="getHumidityStatusColor(scope.row.humidity)" 
                                        size="mini" 
                                        :style="getHumidityStatusColor(scope.row.humidity) === 'warning' ? 'margin-left: 5px; font-weight: bold; background-color: #FF8F00; border-color: #FF8F00; color: white;' : getHumidityStatusColor(scope.row.humidity) === 'danger' ? 'margin-left: 5px; font-weight: bold; background-color: #B71C1C; border-color: #B71C1C; color: white;' : 'margin-left: 5px; font-weight: bold;'">
                                        {{getHumidityStatusText(scope.row.humidity)}}
                                    </el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                    <el-card class="section" shadow="hover" style="margin-bottom:18px;">
                        <div slot="header">管网压力设备</div>
                        <el-table :data="filteredDevices.filter(d=>d.type==='压力')" border stripe class="device-table" size="small">
                            <el-table-column prop="name" label="设备名称" width="120"></el-table-column>
                            <el-table-column label="压力值" width="500">
                                <template slot-scope="scope">
                                    <div style="display: flex; align-items: center; gap: 15px;">
                                        <!-- 下拉列表 -->
                                        <el-select 
                                            v-model="scope.row.pressureInput" 
                                            placeholder="选择压力值" 
                                            size="small" 
                                            style="width: 100px;"
                                            @change="updatePressureFromSelect(scope.row)">
                                            <el-option 
                                                v-for="value in pressureOptions" 
                                                :key="value" 
                                                :label="value + 'MPa'" 
                                                :value="value.toString()">
                                            </el-option>
                                        </el-select>
                                        
                                        <div style="flex: 1; position: relative;">
                                            <span style="font-weight: bold; color: #303133; min-width: 60px;">
                                                {{getPressureValue(scope.row.pressure)}}MPa
                                            </span>
                                            <div style="flex: 1; position: relative;">
                                                <!-- 进度条背景 -->
                                                <div style="
                                                    width: 100%;
                                                    height: 20px;
                                                    background: #F5F7FA;
                                                    border-radius: 10px;
                                                    position: relative;
                                                    border: 1px solid #DCDFE6;
                                                ">
                                                    <!-- 动态进度条 -->
                                                    <div :style="{
                                                        width: getPressurePercentage(scope.row.pressure) + '%',
                                                        height: '100%',
                                                        background: getPressureStatusColor(scope.row.pressure, scope.row.name) === 'danger' ? '#F56C6C' : getPressureStatusColor(scope.row.pressure, scope.row.name) === 'warning' ? '#E6A23C' : getPressureStatusColor(scope.row.pressure, scope.row.name) === 'success' ? '#67C23A' : '#909399',
                                                        borderRadius: '10px',
                                                        position: 'absolute',
                                                        left: '0',
                                                        top: '0',
                                                        transition: 'width 0.3s ease'
                                                    }"></div>
                                                    
                                                    <!-- 当前值指示器 -->
                                                    <div :style="{
                                                        position: 'absolute',
                                                        top: '-5px',
                                                        left: getPressurePercentage(scope.row.pressure) + '%',
                                                        transform: 'translateX(-50%)',
                                                        width: '0',
                                                        height: '0',
                                                        borderLeft: '8px solid transparent',
                                                        borderRight: '8px solid transparent',
                                                        borderTop: '12px solid #303133',
                                                        zIndex: '10'
                                                    }"></div>
                                                    <!-- 当前值标签 -->
                                                    <div :style="{
                                                        position: 'absolute',
                                                        top: '-30px',
                                                        left: getPressurePercentage(scope.row.pressure) + '%',
                                                        transform: 'translateX(-50%)',
                                                        background: '#303133',
                                                        color: 'white',
                                                        padding: '2px 6px',
                                                        borderRadius: '4px',
                                                        fontSize: '12px',
                                                        whiteSpace: 'nowrap',
                                                        zIndex: '10'
                                                    }">
                                                        {{getPressureValue(scope.row.pressure)}}MPa
                                                    </div>
                                                </div>
                                                <!-- 刻度标记 -->
                                                <div style="display: flex; justify-content: space-between; margin-top: 5px; font-size: 11px; color: #606266;">
                                                    <span>0MPa</span>
                                                    <span>2MPa</span>
                                                    <span>4MPa</span>
                                                    <span>6MPa</span>
                                                    <span>8MPa</span>
                                                    <span>10MPa</span>
                                                </div>
                                                <!-- 状态标签 -->
                                                <div style="display: flex; justify-content: center; margin-top: 2px; font-size: 10px;">
                                                    <span :style="{
                                                        background: getPressureStatusColor(scope.row.pressure, scope.row.name) === 'danger' ? '#F56C6C' : 
                                                                   getPressureStatusColor(scope.row.pressure, scope.row.name) === 'warning' ? '#E6A23C' : 
                                                                   getPressureStatusColor(scope.row.pressure, scope.row.name) === 'success' ? '#67C23A' : '#909399',
                                                        color: 'white',
                                                        padding: '2px 6px',
                                                        borderRadius: '4px',
                                                        fontWeight: 'bold'
                                                    }">
                                                        {{getPressureStatusText(scope.row.pressure, scope.row.name)}}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                    <el-card class="section" shadow="hover" style="margin-bottom:18px;">
                        <div slot="header">水箱/水池</div>
                        <el-table :data="filteredDevices.filter(d=>d.type==='水箱'||d.type==='水池')" border stripe class="device-table" size="small">
                            <el-table-column prop="name" label="设备名称" width="120"></el-table-column>
                            <el-table-column prop="liquid" label="液位" width="500">
                                <template slot-scope="scope">
                                    <div style="display: flex; align-items: center; gap: 15px;">
                                        <!-- 下拉列表 -->
                                        <el-select 
                                            v-model="scope.row.liquidInput" 
                                            placeholder="选择液位值" 
                                            size="small" 
                                            style="width: 100px;"
                                            @change="updateLiquidFromSelect(scope.row)">
                                            <el-option 
                                                v-for="value in liquidOptions" 
                                                :key="value" 
                                                :label="value + '米'" 
                                                :value="value.toString()">
                                            </el-option>
                                        </el-select>

                                        <div style="flex: 1; position: relative;">
                                            <span style="font-weight: bold; color: #303133; min-width: 60px;">
                                                {{getLiquidValue(scope.row.liquid)}}米
                                            </span>
                                            <div style="flex: 1; position: relative;">
                                                <!-- 进度条背景 -->
                                                <div style="width: 100%; height: 20px; background: #E4E7ED; border-radius: 10px; position: relative; overflow: hidden;">
                                                    <!-- 动态进度条 -->
                                                    <div :style="{
                                                        width: getLiquidPercentage(scope.row.liquid) + '%',
                                                        height: '100%',
                                                        background: getLiquidStatusColor(scope.row.liquid, scope.row.name) === 'danger' ? '#F56C6C' : 
                                                                   getLiquidStatusColor(scope.row.liquid, scope.row.name) === 'warning' ? '#E6A23C' : 
                                                                   getLiquidStatusColor(scope.row.liquid, scope.row.name) === 'success' ? '#67C23A' : '#909399',
                                                        borderRadius: '10px',
                                                        transition: 'width 0.3s ease'
                                                    }"></div>
                                                </div>
                                                <!-- 指示器箭头 -->
                                                <div :style="{
                                                    position: 'absolute',
                                                    top: '-5px',
                                                    left: getLiquidPercentage(scope.row.liquid) + '%',
                                                    transform: 'translateX(-50%)',
                                                    width: '0',
                                                    height: '0',
                                                    borderLeft: '8px solid transparent',
                                                    borderRight: '8px solid transparent',
                                                    borderTop: '12px solid #303133',
                                                    zIndex: '10'
                                                }"></div>
                                                <!-- 当前值标签 -->
                                                <div :style="{
                                                    position: 'absolute',
                                                    top: '-30px',
                                                    left: getLiquidPercentage(scope.row.liquid) + '%',
                                                    transform: 'translateX(-50%)',
                                                    background: '#303133',
                                                    color: 'white',
                                                    padding: '2px 6px',
                                                    borderRadius: '4px',
                                                    fontSize: '12px',
                                                    whiteSpace: 'nowrap',
                                                    zIndex: '10'
                                                }">
                                                    {{getLiquidValue(scope.row.liquid)}}米
                                                </div>
                                                <!-- 刻度标记 -->
                                                <div style="display: flex; justify-content: space-between; margin-top: 5px; font-size: 11px; color: #606266;">
                                                    <span>0米</span>
                                                    <span>2米</span>
                                                    <span>4米</span>
                                                    <span>6米</span>
                                                    <span>8米</span>
                                                    <span>10米</span>
                                                </div>
                                                <!-- 状态标签 -->
                                                <div style="display: flex; justify-content: center; margin-top: 2px; font-size: 10px;">
                                                    <span :style="{
                                                        background: getLiquidStatusColor(scope.row.liquid, scope.row.name) === 'danger' ? '#F56C6C' : 
                                                                   getLiquidStatusColor(scope.row.liquid, scope.row.name) === 'warning' ? '#E6A23C' : 
                                                                   getLiquidStatusColor(scope.row.liquid, scope.row.name) === 'success' ? '#67C23A' : '#909399',
                                                        color: 'white',
                                                        padding: '2px 6px',
                                                        borderRadius: '4px',
                                                        fontWeight: 'bold'
                                                    }">
                                                        {{getLiquidStatusText(scope.row.liquid, scope.row.name)}}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="door" label="门开关状态" width="100">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.door==='打开'?'success':'info'" size="mini">{{scope.row.door||'-'}}</el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                    <el-card class="section" shadow="hover" style="margin-bottom:18px;">
                        <div slot="header">集水井信息</div>
                        <div v-for="well in filteredDevices.filter(d=>d.type==='集水井')" :key="well.name" style="margin-bottom:18px;">
                            <div style="font-weight:bold;margin-bottom:6px;">
                                {{well.name}} 液位：
                            </div>
                            <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 10px;">
                                <!-- 下拉列表 -->
                                <el-select 
                                    v-model="well.liquidInput" 
                                    placeholder="选择液位值" 
                                    size="small" 
                                    style="width: 100px;"
                                    @change="updateWellLiquidFromSelect(well)">
                                    <el-option 
                                        v-for="value in liquidOptions" 
                                        :key="value" 
                                        :label="value + '米'" 
                                        :value="value.toString()">
                                    </el-option>
                                </el-select>

                                <div style="flex: 1; position: relative;">
                                    <span style="font-weight: bold; color: #303133; min-width: 60px;">
                                        {{getLiquidValue(well.liquid)}}米
                                    </span>
                                    <div style="flex: 1; position: relative;">
                                        <!-- 进度条背景 -->
                                        <div style="
                                            width: 100%;
                                            height: 20px;
                                            background: #F5F7FA;
                                            border-radius: 10px;
                                            position: relative;
                                            border: 1px solid #DCDFE6;
                                        ">
                                            <!-- 动态进度条 -->
                                            <div :style="{
                                                width: getLiquidPercentage(well.liquid) + '%',
                                                height: '100%',
                                                background: getWellLiquidStatusColor(well.liquid, well.name) === 'danger' ? '#F56C6C' : getWellLiquidStatusColor(well.liquid, well.name) === 'warning' ? '#E6A23C' : getWellLiquidStatusColor(well.liquid, well.name) === 'success' ? '#67C23A' : '#909399',
                                                borderRadius: '10px',
                                                position: 'absolute',
                                                left: '0',
                                                top: '0',
                                                transition: 'width 0.3s ease'
                                            }"></div>
                                            
                                            <!-- 当前值指示器 -->
                                            <div :style="{
                                                position: 'absolute',
                                                top: '-5px',
                                                left: getLiquidPercentage(well.liquid) + '%',
                                                transform: 'translateX(-50%)',
                                                width: '0',
                                                height: '0',
                                                borderLeft: '8px solid transparent',
                                                borderRight: '8px solid transparent',
                                                borderTop: '12px solid #303133',
                                                zIndex: '10'
                                            }"></div>
                                            <!-- 当前值标签 -->
                                            <div :style="{
                                                position: 'absolute',
                                                top: '-30px',
                                                left: getLiquidPercentage(well.liquid) + '%',
                                                transform: 'translateX(-50%)',
                                                background: '#303133',
                                                color: 'white',
                                                padding: '2px 6px',
                                                borderRadius: '4px',
                                                fontSize: '12px',
                                                whiteSpace: 'nowrap',
                                                zIndex: '10'
                                            }">
                                                {{getLiquidValue(well.liquid)}}米
                                            </div>
                                        </div>
                                        <!-- 刻度标记 -->
                                        <div style="display: flex; justify-content: space-between; margin-top: 5px; font-size: 11px; color: #606266;">
                                            <span>0米</span>
                                            <span>2米</span>
                                            <span>4米</span>
                                            <span>6米</span>
                                            <span>8米</span>
                                            <span>10米</span>
                                        </div>
                                        <!-- 状态标签 -->
                                        <div style="display: flex; justify-content: center; margin-top: 2px; font-size: 10px;">
                                            <span :style="{
                                                background: getWellLiquidStatusColor(well.liquid, well.name) === 'danger' ? '#F56C6C' : 
                                                           getWellLiquidStatusColor(well.liquid, well.name) === 'warning' ? '#E6A23C' : 
                                                           getWellLiquidStatusColor(well.liquid, well.name) === 'success' ? '#67C23A' : '#909399',
                                                color: 'white',
                                                padding: '2px 6px',
                                                borderRadius: '4px',
                                                fontWeight: 'bold'
                                            }">
                                                {{getWellLiquidStatusText(well.liquid, well.name)}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <el-table :data="well.pumps||[]" border stripe class="device-table" size="small">
                                <el-table-column prop="name" label="水泵名称" width="120"></el-table-column>
                                <el-table-column prop="status" label="水泵状态" width="120">
                                    <template slot-scope="scope">
                                        <el-tag :type="scope.row.status==='启动'?'success':(scope.row.status==='停止'?'info':(scope.row.status==='故障'?'danger':'warning'))" size="mini">{{scope.row.status}}</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="mode" label="控制模式" width="100">
                                    <template slot-scope="scope">
                                        <el-tag v-if="scope.row.mode" :type="scope.row.mode==='自动'?'success':'info'" size="mini">{{scope.row.mode}}</el-tag>
                                        <span v-else>-</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="temp" label="水泵温度"></el-table-column>
                                <el-table-column prop="noise" label="水泵噪声"></el-table-column>
                                <el-table-column prop="current" label="电流"></el-table-column>
                                <el-table-column prop="voltage" label="电压"></el-table-column>
                                <el-table-column label="远程启动" width="100">
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="primary">启动</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-card>
                    <el-card class="section alarm-section-card" shadow="hover" style="margin-bottom:0; border:2px solid #F56C6C; background:#FEF0F0;">
                        <div slot="header" style="color:#C62828; font-weight:bold; display:flex; align-items:center;"><i class="el-icon-warning-outline" style="margin-right:8px;"></i>告警列表</div>
                        <el-table :data="filteredAlerts" border stripe class="alert-table" size="small" @row-dblclick="handleAlertDoubleClick" style="cursor: pointer;">
                            <el-table-column prop="device" label="设备" width="120"></el-table-column>
                            <el-table-column prop="sensorName" label="传感器名称" width="150"></el-table-column>
                            <el-table-column prop="type" label="告警内容" min-width="200">
                                <template slot-scope="scope">
                                    <div style="display: flex; align-items: center; gap: 5px;">
                                        <span style="color: #F56C6C; font-weight: bold;">{{scope.row.type}}</span>
                                        <el-tag size="mini" type="info" style="font-size: 10px;">双击处理</el-tag>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" label="状态" width="100">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.status==='未处理'?'danger':'success'" size="mini">{{scope.row.status}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="time" label="时间" width="150"></el-table-column>
                        </el-table>
                    </el-card>
                </el-tab-pane>
                <!-- 4. 机房点位图 -->
                <el-tab-pane label="机房点位图" name="map">
                    <el-select v-model="selectedRoom" placeholder="请选择机房" style="margin-bottom:16px;width:220px;">
                        <el-option v-for="room in rooms" :key="room.name" :label="room.name" :value="room.name"></el-option>
                    </el-select>
                    <el-card class="section" shadow="hover">
                        <div slot="header">机房点位图</div>
                        <div class="point-map">
                            <span v-if="!pointMarkers[selectedRoom]">暂无背景图和点位信息</span>
                            <template v-else>
                                <span style="color:#1565C0;">[背景图占位]</span>
                                <div v-for="(marker, idx) in pointMarkers[selectedRoom]" :key="idx" class="point-marker" :style="{left: marker.x+'%', top: marker.y+'%'}" :title="marker.device" @click="selectDevice(marker)">
                                    <div style="position:absolute;top:-28px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:bold;color:#333;white-space:nowrap;">{{marker.device}}</div>
                                    <i :class="deviceImages[marker.device]" style="font-size:28px;"></i>
                                    <div style="position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);display:flex;gap:4px;">
                                        <el-tag v-if="getDeviceAlertStatus(marker.device)" type="danger" size="mini">告警</el-tag>
                                        <el-tag v-else type="success" size="mini">正常</el-tag>
                                        <el-tag v-if="getDeviceOfflineStatus(marker.device)" type="danger" size="mini">离线</el-tag>
                                        <el-tag v-else type="success" size="mini">在线</el-tag>
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div v-if="selectedDevice" class="device-detail-panel">
                            <el-card shadow="never" style="margin-top:18px;">
                                <div slot="header">{{selectedDevice.device}} 详情</div>
                                <template v-if="selectedDeviceType==='水泵'">
                                    <el-table :data="getDeviceData(selectedDevice.device)" border stripe size="small">
                                        <el-table-column prop="name" label="水泵名称" width="120"></el-table-column>
                                        <el-table-column prop="status" label="水泵状态" width="120"></el-table-column>
                                        <el-table-column prop="mode" label="控制模式" width="100"></el-table-column>
                                        <el-table-column prop="temp" label="水泵温度"></el-table-column>
                                        <el-table-column prop="noise" label="水泵噪声"></el-table-column>
                                        <el-table-column prop="current" label="电流"></el-table-column>
                                        <el-table-column prop="voltage" label="电压"></el-table-column>
                                        <el-table-column label="远程启动" width="100">
                                            <template slot-scope="scope">
                                                <el-button size="mini" type="primary">启动</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </template>
                                <template v-else-if="selectedDeviceType==='集水井'">
                                    <div>液位：<b>{{getDeviceData(selectedDevice.device)[0]?.liquid}}</b></div>
                                    <el-table :data="getDeviceData(selectedDevice.device)[0]?.pumps||[]" border stripe size="small" style="margin-top:10px;">
                                        <el-table-column prop="name" label="水泵名称" width="120"></el-table-column>
                                        <el-table-column prop="status" label="水泵状态" width="120"></el-table-column>
                                        <el-table-column prop="mode" label="控制模式" width="100"></el-table-column>
                                        <el-table-column prop="temp" label="水泵温度"></el-table-column>
                                        <el-table-column prop="noise" label="水泵噪声"></el-table-column>
                                        <el-table-column prop="current" label="电流"></el-table-column>
                                        <el-table-column prop="voltage" label="电压"></el-table-column>
                                    </el-table>
                                </template>
                                <template v-else-if="selectedDeviceType==='压力'">
                                    <el-table :data="getDeviceData(selectedDevice.device)" border stripe size="small">
                                        <el-table-column prop="name" label="设备名称" width="120"></el-table-column>
                                        <el-table-column label="压力值" width="400">
                                            <template slot-scope="scope">
                                                <div style="display: flex; align-items: center; gap: 10px;">
                                                    <span style="font-weight: bold; color: #303133; min-width: 60px;">
                                                        {{getPressureValue(scope.row.pressure)}}MPa
                                                    </span>
                                                    <div style="flex: 1; position: relative;">
                                                        <!-- 进度条背景 -->
                                                        <div :style="{
                                                            width: '100%',
                                                            height: '20px',
                                                            background: getPressureStatusColor(scope.row.pressure, scope.row.name) === 'danger' ? '#F56C6C' : getPressureStatusColor(scope.row.pressure, scope.row.name) === 'warning' ? '#E6A23C' : getPressureStatusColor(scope.row.pressure, scope.row.name) === 'success' ? '#67C23A' : '#909399',
                                                            borderRadius: '10px',
                                                            position: 'relative',
                                                            border: '1px solid #DCDFE6',
                                                            cursor: 'pointer'
                                                        }" @mousedown="startDrag($event, scope.row)" @click="handleProgressClick($event, scope.row)">
                                                            <!-- 当前值指示器 -->
                                                            <div :style="{
                                                                position: 'absolute',
                                                                top: '-5px',
                                                                left: getPressurePercentage(scope.row.pressure) + '%',
                                                                transform: 'translateX(-50%)',
                                                                width: '0',
                                                                height: '0',
                                                                borderLeft: '8px solid transparent',
                                                                borderRight: '8px solid transparent',
                                                                borderTop: '12px solid #303133',
                                                                zIndex: '10'
                                                            }"></div>
                                                            <!-- 当前值标签 -->
                                                            <div :style="{
                                                                position: 'absolute',
                                                                top: '-30px',
                                                                left: getPressurePercentage(scope.row.pressure) + '%',
                                                                transform: 'translateX(-50%)',
                                                                background: '#303133',
                                                                color: 'white',
                                                                padding: '2px 6px',
                                                                borderRadius: '4px',
                                                                fontSize: '12px',
                                                                whiteSpace: 'nowrap',
                                                                zIndex: '10'
                                                            }">
                                                                {{getPressureValue(scope.row.pressure)}}MPa
                                                            </div>
                                                        </div>
                                                        <!-- 刻度标记 -->
                                                        <div style="display: flex; justify-content: space-between; margin-top: 5px; font-size: 11px; color: #606266;">
                                                            <span>0MPa</span>
                                                            <span>2MPa</span>
                                                            <span>4MPa</span>
                                                            <span>6MPa</span>
                                                            <span>8MPa</span>
                                                            <span>10MPa</span>
                                                        </div>
                                                        <!-- 状态标签 -->
                                                        <div style="display: flex; justify-content: center; margin-top: 2px; font-size: 10px;">
                                                            <span :style="{
                                                                background: getPressureStatusColor(scope.row.pressure, scope.row.name) === 'danger' ? '#F56C6C' : 
                                                                           getPressureStatusColor(scope.row.pressure, scope.row.name) === 'warning' ? '#E6A23C' : 
                                                                           getPressureStatusColor(scope.row.pressure, scope.row.name) === 'success' ? '#67C23A' : '#909399',
                                                                color: 'white',
                                                                padding: '2px 6px',
                                                                borderRadius: '4px',
                                                                fontWeight: 'bold'
                                                            }">
                                                                {{getPressureStatusText(scope.row.pressure, scope.row.name)}}
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </template>
                                <template v-else-if="selectedDeviceType==='水箱'||selectedDeviceType==='水池'">
                                    <el-table :data="getDeviceData(selectedDevice.device)" border stripe size="small">
                                        <el-table-column prop="name" label="设备名称" width="120"></el-table-column>
                                        <el-table-column prop="liquid" label="液位"></el-table-column>
                                        <el-table-column prop="door" label="门开关状态"></el-table-column>
                                    </el-table>
                                </template>
                                <div style="margin-top:10px;">
                                    <b>告警列表</b>
                                    <el-table :data="getDeviceAlerts(selectedDevice.device)" border stripe size="mini" style="margin-top:6px;">
                                        <el-table-column prop="sensorName" label="传感器名称" width="120"></el-table-column>
                                        <el-table-column prop="type" label="告警内容" min-width="150">
                                            <template slot-scope="scope">
                                                <span style="color: #F56C6C; font-weight: bold; font-size: 12px;">{{scope.row.type}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="status" label="状态" width="80">
                                            <template slot-scope="scope">
                                                <el-tag :type="scope.row.status==='未处理'?'danger':'success'" size="mini">{{scope.row.status}}</el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="time" label="时间" width="120"></el-table-column>
                                    </el-table>
                                </div>
                            </el-card>
                        </div>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog :visible.sync="bindDialogVisible" title="机房绑定信息配置" width="900px" append-to-body>
            <el-form :model="bindForm" label-width="140px" size="small">
                <el-form-item label="机房名称">
                    <el-input v-model="bindForm.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="绑定水泵设备">
                    <el-select v-model="bindForm.pumps" multiple placeholder="请选择水泵设备">
                        <el-option v-for="item in allPumps" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="绑定管网压力">
                    <div style="margin-bottom: 10px;">
                        <el-button size="mini" type="primary" @click="showPressureDeviceSelector">
                            <i class="el-icon-plus"></i> 添加压力设备
                        </el-button>
                    </div>
                    <div v-for="(device, index) in bindForm.pressureDevices" :key="index" style="border: 1px solid #EBEEF5; border-radius: 4px; padding: 12px; margin-bottom: 10px; background: #FAFAFA;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                            <span style="font-weight: bold; color: #303133;">{{device.name}}</span>
                            <el-button size="mini" type="danger" @click="removePressureDevice(index)">
                                <i class="el-icon-delete"></i> 删除
                            </el-button>
                        </div>
                        <el-row :gutter="12">
                            <el-col :span="12">
                                <el-form-item label="有效范围最小值" label-width="120px" size="small">
                                    <el-input v-model="device.minValue" placeholder="如：0" style="width: 100%;" @input="onEffectiveRangeChange(index)">
                                        <template slot="append">{{device.unit}}</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="有效范围最大值" label-width="120px" size="small">
                                    <el-input v-model="device.maxValue" placeholder="如：10" style="width: 100%;" @input="onEffectiveRangeChange(index)">
                                        <template slot="append">{{device.unit}}</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="8">
                                <el-form-item label="单位" label-width="50px" size="small">
                                    <el-select v-model="device.unit" placeholder="单位" style="width: 100%;">
                                        <el-option label="MPa" value="MPa"></el-option>
                                        <el-option label="kPa" value="kPa"></el-option>
                                        <el-option label="bar" value="bar"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="16">
                                <el-form-item label="操作" label-width="50px" size="small">
                                    <el-button 
                                        v-if="device.showRefreshButton" 
                                        type="primary" 
                                        size="small" 
                                        @click="refreshEffectiveRange(index)"
                                        style="margin-top: 8px;">
                                        刷新有效范围
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="24">
                                <el-form-item label="预警范围显示" label-width="100px" size="small">
                                    <div style="display: flex; flex-direction: column; gap: 8px;"><div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;"><span style="font-size: 12px; color: #606266; min-width: 50px;">超低压:</span><span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.ultraLow : "0 - 2"}} {{device.unit}}</span><span style="font-size: 12px; color: #F56C6C;">红色</span></div><div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;"><span style="font-size: 12px; color: #606266; min-width: 50px;">低压:</span><span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.low : "2 - 4"}} {{device.unit}}</span><span style="font-size: 12px; color: #E6A23C;">黄色</span></div><div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;"><span style="font-size: 12px; color: #606266; min-width: 50px;">正常:</span><span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.normal : "4 - 6"}} {{device.unit}}</span><span style="font-size: 12px; color: #67C23A;">绿色</span></div><div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;"><span style="font-size: 12px; color: #606266; min-width: 50px;">高压:</span><span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.high : "6 - 8"}} {{device.unit}}</span><span style="font-size: 12px; color: #E6A23C;">黄色</span></div><div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;"><span style="font-size: 12px; color: #606266; min-width: 50px;">超高压:</span><span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.ultraHigh : "8 - 10"}} {{device.unit}}</span><span style="font-size: 12px; color: #F56C6C;">红色</span></div></div></el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="24">
                                <el-form-item label="预警值配置" label-width="100px" size="small">
                                    <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                        <input type="text" :id="'warningValue1_' + index" placeholder="值1" value="0" readonly style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px; background-color: #F5F7FA;">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'warningValue2_' + index" placeholder="值2" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onWarningValueInput(index)">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'warningValue3_' + index" placeholder="值3" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onWarningValueInput(index)">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'warningValue4_' + index" placeholder="值4" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onWarningValueInput(index)">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'warningValue5_' + index" placeholder="值5" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onWarningValueInput(index)">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'warningValue6_' + index" placeholder="值6" value="10" readonly style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px; background-color: #F5F7FA;">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="24">
                                <el-form-item label="" label-width="100px" size="small">
                                    <el-button 
                                        v-if="device.showWarningRefreshButton" 
                                        type="success" 
                                        size="small" 
                                        @click="refreshWarningRanges(index)"
                                        style="margin-top: 8px;">
                                        刷新预警范围
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form-item>
                <el-form-item label="绑定环境信息">
                    <el-select v-model="bindForm.envDevice" placeholder="请选择环境监测设备" style="width: 100%; margin-bottom: 15px;">
                        <el-option v-for="item in availableEnvDevices" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                    
                    <div v-if="bindForm.envDevice" style="border: 1px solid #EBEEF5; border-radius: 4px; padding: 15px; background: #FAFAFA;">
                        <div style="font-weight: bold; color: #303133; margin-bottom: 15px;">环境监测设备配置</div>
                        
                        <!-- 水浸配置 -->
                        <el-form-item label="水浸监测" label-width="100px" size="small">
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <span style="font-size: 12px; color: #606266;">水浸状态：</span>
                                <el-tag type="danger" size="mini">水浸 - 红色</el-tag>
                                <el-tag type="success" size="mini">非水浸 - 绿色</el-tag>
                            </div>
                        </el-form-item>
                        
                        <!-- 噪声配置 -->
                        <el-form-item label="噪声监测" label-width="100px" size="small">
                            <el-row :gutter="12">
                                <el-col :span="12">
                                    <el-form-item label="预警阈值" label-width="80px" size="small">
                                        <el-input v-model="bindForm.envConfig.noiseWarning" placeholder="如：50" style="width: 100%;">
                                            <template slot="append">dB</template>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="告警阈值" label-width="80px" size="small">
                                        <el-input v-model="bindForm.envConfig.noiseDanger" placeholder="如：70" style="width: 100%;">
                                            <template slot="append">dB</template>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div style="display: flex; align-items: center; gap: 10px; margin-top: 5px;">
                                <span style="font-size: 12px; color: #606266;">显示规则：</span>
                                <el-tag type="success" size="mini">正常 - 绿色</el-tag>
                                <el-tag type="warning" size="mini">预警 - 黄色</el-tag>
                                <el-tag type="danger" size="mini">告警 - 红色</el-tag>
                            </div>
                        </el-form-item>
                        
                        <!-- 温度配置 -->
                        <el-form-item label="温度监测" label-width="100px" size="small">
                            <el-row :gutter="12">
                                <el-col :span="12">
                                    <el-form-item label="预警阈值" label-width="80px" size="small">
                                        <el-input v-model="bindForm.envConfig.tempWarning" placeholder="如：35" style="width: 100%;">
                                            <template slot="append">℃</template>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="告警阈值" label-width="80px" size="small">
                                        <el-input v-model="bindForm.envConfig.tempDanger" placeholder="如：45" style="width: 100%;">
                                            <template slot="append">℃</template>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div style="display: flex; align-items: center; gap: 10px; margin-top: 5px;">
                                <span style="font-size: 12px; color: #606266;">显示规则：</span>
                                <el-tag type="success" size="mini">正常 - 绿色</el-tag>
                                <el-tag type="warning" size="mini">预警 - 黄色</el-tag>
                                <el-tag type="danger" size="mini">告警 - 红色</el-tag>
                            </div>
                        </el-form-item>
                        
                        <!-- 湿度配置 -->
                        <el-form-item label="湿度监测" label-width="100px" size="small">
                            <el-row :gutter="12">
                                <el-col :span="12">
                                    <el-form-item label="预警阈值" label-width="80px" size="small">
                                        <el-input v-model="bindForm.envConfig.humidityWarning" placeholder="如：75" style="width: 100%;">
                                            <template slot="append">%</template>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="告警阈值" label-width="80px" size="small">
                                        <el-input v-model="bindForm.envConfig.humidityDanger" placeholder="如：80" style="width: 100%;">
                                            <template slot="append">%</template>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div style="display: flex; align-items: center; gap: 10px; margin-top: 5px;">
                                <span style="font-size: 12px; color: #606266;">显示规则：</span>
                                <el-tag type="success" size="mini">正常 - 绿色</el-tag>
                                <el-tag type="warning" size="mini">预警 - 黄色</el-tag>
                                <el-tag type="danger" size="mini">告警 - 红色</el-tag>
                            </div>
                        </el-form-item>
                    </div>
                </el-form-item>
                <el-form-item label="绑定水箱/水池">
                    <div style="margin-bottom: 10px;">
                        <el-button size="mini" type="primary" @click="showTankDeviceSelector">
                            <i class="el-icon-plus"></i> 添加水箱/水池设备
                        </el-button>
                    </div>
                    <div v-for="(device, index) in bindForm.tankDevices" :key="index" style="border: 1px solid #EBEEF5; border-radius: 4px; padding: 12px; margin-bottom: 10px; background: #FAFAFA;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                            <span style="font-weight: bold; color: #303133;">{{device.name}}</span>
                            <el-button size="mini" type="danger" @click="removeTankDevice(index)">
                                <i class="el-icon-delete"></i> 删除
                            </el-button>
                        </div>
                        <el-row :gutter="12">
                            <el-col :span="12">
                                <el-form-item label="有效范围最小值" label-width="120px" size="small">
                                    <el-input v-model="device.minValue" placeholder="如：0" style="width: 100%;" @input="onTankRangeChange(index)">
                                        <template slot="append">米</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="有效范围最大值" label-width="120px" size="small">
                                    <el-input v-model="device.maxValue" placeholder="如：10" style="width: 100%;" @input="onTankRangeChange(index)">
                                        <template slot="append">米</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="16">
                                <el-form-item label="操作" label-width="50px" size="small">
                                    <el-button 
                                        v-if="device.showRefreshButton" 
                                        type="primary" 
                                        size="small" 
                                        @click="refreshTankEffectiveRange(index)"
                                        style="margin-top: 8px;">
                                        刷新有效范围
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="24">
                                <el-form-item label="预警范围显示" label-width="100px" size="small">
                                    <div style="display: flex; flex-direction: column; gap: 8px;">
                                        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                            <span style="font-size: 12px; color: #606266; min-width: 50px;">超低:</span>
                                            <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.ultraLow : "0 - 2"}} {{device.unit}}</span>
                                            <span style="font-size: 12px; color: #F56C6C;">红色</span>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                            <span style="font-size: 12px; color: #606266; min-width: 50px;">低:</span>
                                            <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.low : "2 - 4"}} {{device.unit}}</span>
                                            <span style="font-size: 12px; color: #E6A23C;">黄色</span>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                            <span style="font-size: 12px; color: #606266; min-width: 50px;">正常:</span>
                                            <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.normal : "4 - 6"}} {{device.unit}}</span>
                                            <span style="font-size: 12px; color: #67C23A;">绿色</span>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                            <span style="font-size: 12px; color: #606266; min-width: 50px;">高:</span>
                                            <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.high : "6 - 8"}} {{device.unit}}</span>
                                            <span style="font-size: 12px; color: #E6A23C;">黄色</span>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                            <span style="font-size: 12px; color: #606266; min-width: 50px;">超高:</span>
                                            <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.ultraHigh : "8 - 10"}} {{device.unit}}</span>
                                            <span style="font-size: 12px; color: #F56C6C;">红色</span>
                                        </div>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="24">
                                <el-form-item label="预警值配置" label-width="100px" size="small">
                                    <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                        <input type="text" :id="'tankWarningValue1_' + index" placeholder="值1" value="0" readonly style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px; background-color: #F5F7FA;">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'tankWarningValue2_' + index" placeholder="值2" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onTankWarningValueInput(index)">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'tankWarningValue3_' + index" placeholder="值3" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onTankWarningValueInput(index)">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'tankWarningValue4_' + index" placeholder="值4" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onTankWarningValueInput(index)">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'tankWarningValue5_' + index" placeholder="值5" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onTankWarningValueInput(index)">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'tankWarningValue6_' + index" placeholder="值6" value="10" readonly style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px; background-color: #F5F7FA;">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="24">
                                <el-form-item label="" label-width="100px" size="small">
                                    <el-button 
                                        v-if="device.showWarningRefreshButton" 
                                        type="success" 
                                        size="small" 
                                        @click="refreshTankWarningRanges(index)"
                                        style="margin-top: 8px;">
                                        刷新预警范围
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form-item>
                <el-form-item label="绑定集水井">
                    <div style="margin-bottom: 10px;">
                        <el-button size="mini" type="primary" @click="showWellDeviceSelector">
                            <i class="el-icon-plus"></i> 添加集水井设备
                        </el-button>
                    </div>
                    <div v-for="(device, index) in bindForm.wellDevices" :key="index" style="border: 1px solid #EBEEF5; border-radius: 4px; padding: 12px; margin-bottom: 10px; background: #FAFAFA;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                            <span style="font-weight: bold; color: #303133;">{{device.name}}</span>
                            <el-button size="mini" type="danger" @click="removeWellDevice(index)">
                                <i class="el-icon-delete"></i> 删除
                            </el-button>
                        </div>
                        <el-row :gutter="12">
                            <el-col :span="12">
                                <el-form-item label="有效范围最小值" label-width="120px" size="small">
                                    <el-input v-model="device.minValue" placeholder="如：0" style="width: 100%;" @input="onWellRangeChange(index)">
                                        <template slot="append">米</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="有效范围最大值" label-width="120px" size="small">
                                    <el-input v-model="device.maxValue" placeholder="如：10" style="width: 100%;" @input="onWellRangeChange(index)">
                                        <template slot="append">米</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="16">
                                <el-form-item label="操作" label-width="50px" size="small">
                                    <el-button 
                                        v-if="device.showRefreshButton" 
                                        type="primary" 
                                        size="small" 
                                        @click="refreshWellEffectiveRange(index)"
                                        style="margin-top: 8px;">
                                        刷新有效范围
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="24">
                                <el-form-item label="预警范围显示" label-width="100px" size="small">
                                    <div style="display: flex; flex-direction: column; gap: 8px;">
                                        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                            <span style="font-size: 12px; color: #606266; min-width: 50px;">超低:</span>
                                            <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.ultraLow : "0 - 2"}} {{device.unit}}</span>
                                            <span style="font-size: 12px; color: #F56C6C;">红色</span>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                            <span style="font-size: 12px; color: #606266; min-width: 50px;">低:</span>
                                            <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.low : "2 - 4"}} {{device.unit}}</span>
                                            <span style="font-size: 12px; color: #E6A23C;">黄色</span>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                            <span style="font-size: 12px; color: #606266; min-width: 50px;">正常:</span>
                                            <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.normal : "4 - 6"}} {{device.unit}}</span>
                                            <span style="font-size: 12px; color: #67C23A;">绿色</span>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                            <span style="font-size: 12px; color: #606266; min-width: 50px;">高:</span>
                                            <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.high : "6 - 8"}} {{device.unit}}</span>
                                            <span style="font-size: 12px; color: #E6A23C;">黄色</span>
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                            <span style="font-size: 12px; color: #606266; min-width: 50px;">超高:</span>
                                            <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.ultraHigh : "8 - 10"}} {{device.unit}}</span>
                                            <span style="font-size: 12px; color: #F56C6C;">红色</span>
                                        </div>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="24">
                                <el-form-item label="预警值配置" label-width="100px" size="small">
                                    <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                        <input type="text" :id="'wellWarningValue1_' + index" placeholder="值1" value="0" readonly style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px; background-color: #F5F7FA;">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'wellWarningValue2_' + index" placeholder="值2" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onWellWarningValueInput(index)">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'wellWarningValue3_' + index" placeholder="值3" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onWellWarningValueInput(index)">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'wellWarningValue4_' + index" placeholder="值4" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onWellWarningValueInput(index)">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'wellWarningValue5_' + index" placeholder="值5" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onWellWarningValueInput(index)">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                        <input type="text" :id="'wellWarningValue6_' + index" placeholder="值6" value="10" readonly style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px; background-color: #F5F7FA;">
                                        <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="24">
                                <el-form-item label="" label-width="100px" size="small">
                                    <el-button 
                                        v-if="device.showWarningRefreshButton" 
                                        type="success" 
                                        size="small" 
                                        @click="refreshWellWarningRanges(index)"
                                        style="margin-top: 8px;">
                                        刷新预警范围
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="bindDialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="saveBindInfo">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="pointDialogVisible" title="机房点位配置" width="700px" append-to-body>
            <el-form label-width="120px" size="small">
                <el-form-item label="背景设置">
                    <el-radio-group v-model="pointBgMode">
                        <el-radio label="image">上传图片</el-radio>
                        <el-radio label="color">纯色背景</el-radio>
                    </el-radio-group>
                    <div v-if="pointBgMode==='image'" style="margin-top:8px;">
                        <el-upload class="upload-demo" drag action="#" :show-file-list="false" :on-change="handlePointBgUpload">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
                        </el-upload>
                        <div v-if="pointBgUrl" style="margin-top:8px;"><img :src="pointBgUrl" style="max-width:100%;max-height:120px;border-radius:4px;"></div>
                    </div>
                    <div v-else style="margin-top:8px;">
                        <el-color-picker v-model="pointBgColor"></el-color-picker>
                        <span style="margin-left:12px;">当前颜色：<span :style="{background:pointBgColor,display:'inline-block',width:'32px',height:'16px',borderRadius:'4px',border:'1px solid #eee'}"></span></span>
                    </div>
                </el-form-item>
                <el-form-item label="设备点位配置">
                    <el-table :data="pointDevices" border size="mini">
                        <el-table-column label="设备" width="120">
                            <template slot-scope="scope">
                                <i :class="deviceImages[scope.row.name]" style="font-size:24px;color:#1565C0;margin-right:6px;vertical-align:middle;"></i>{{scope.row.name}}
                            </template>
                        </el-table-column>
                        <el-table-column label="类型" prop="type" width="80"></el-table-column>
                        <el-table-column label="X坐标" width="90">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.x" size="mini" placeholder="X"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="Y坐标" width="90">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.y" size="mini" placeholder="Y"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="点位预览">
                    <div style="position:relative;width:100%;height:220px;border-radius:8px;overflow:hidden;border:1px solid #ebeef5;background:#f5f7fa;">
                        <img v-if="pointBgMode==='image' && pointBgUrl" :src="pointBgUrl" style="width:100%;height:100%;object-fit:cover;position:absolute;left:0;top:0;z-index:1;">
                        <div v-else :style="{background:pointBgColor,width:'100%',height:'100%',position:'absolute',left:0,top:0,zIndex:1}"></div>
                        <div v-for="dev in pointDevices" :key="dev.name" :style="{position:'absolute',left:dev.x+'%',top:dev.y+'%',zIndex:2,transform:'translate(-50%,-50%)'}">
                            <i :class="deviceImages[dev.name]" style="font-size:36px;color:#1565C0;"></i>
                            <div style="text-align:center;font-size:12px;color:#333;">{{dev.name}}</div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="pointDialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="savePointInfo">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'list',
                    selectedRoom: 'A栋生活供水泵房',
                    rooms: [
                        { name: 'A栋生活供水泵房', temp: '28℃', humidity: '65%', noise: '45dB', waterLeak: false, offline: false, alert: true },
                        { name: 'B栋生活供水泵房', temp: '26℃', humidity: '62%', noise: '42dB', waterLeak: false, offline: false, alert: false }
                    ],
                    devices: [
                        { room: 'A栋生活供水泵房', name: '水泵1', type: '水泵', status: '启动', mode: '自动', temp: '32℃', noise: '43dB', current: '4.5A', voltage: '380V', liquid: '-', pressure: '-', door: '关闭', },
                        { room: 'A栋生活供水泵房', name: '水泵2', type: '水泵', status: '停止', mode: '手动', temp: '28℃', noise: '40dB', current: '0A', voltage: '380V', liquid: '-', pressure: '-', door: '关闭', },
                        { room: 'A栋生活供水泵房', name: '主水箱', type: '水箱', status: '正常', temp: '-', current: '-', voltage: '-', liquid: '8.0米', liquidInput: '8.0', pressure: '-', door: '关闭', },
                        { room: 'A栋生活供水泵房', name: '备用水池', type: '水池', status: '正常', temp: '-', current: '-', voltage: '-', liquid: '6.5米', liquidInput: '6.5', pressure: '-', door: '关闭', },
                        { room: 'A栋生活供水泵房', name: '集水井1', type: '集水井', status: '正常', temp: '-', current: '-', voltage: '-', liquid: '4.0米', liquidInput: '4.0', pressure: '-', door: '关闭', pumps: [
                            { name: '集水井水泵1', status: '启动', mode: '自动', temp: '31℃', noise: '41dB', current: '4.8A', voltage: '380V' },
                            { name: '集水井水泵2', status: '停止', mode: '手动', temp: '29℃', noise: '40dB', current: '0A', voltage: '380V' }
                        ]},
                        { room: 'A栋生活供水泵房', name: '管网压力', type: '压力', status: '正常', temp: '28℃', current: '-', voltage: '-', liquid: '-', pressure: '3.2MPa', pressureInput: '3.2', time: '2024-06-01 10:30' },
                        { room: 'A栋生活供水泵房', name: '环境', type: '环境', status: '正常', temp: '40℃', current: '-', voltage: '-', liquid: '-', pressure: '-', waterLeak: false, noise: '50dB', humidity: '80%', },
                        { room: 'B栋生活供水泵房', name: '水泵1', type: '水泵', status: '启动', mode: '自动', temp: '31℃', noise: '41dB', current: '4.8A', voltage: '380V', liquid: '-', pressure: '-', door: '关闭', },
                        { room: 'B栋生活供水泵房', name: '主水箱', type: '水箱', status: '正常', temp: '-', current: '-', voltage: '-', liquid: '7.5米', liquidInput: '7.5', pressure: '-', door: '关闭', },
                        { room: 'B栋生活供水泵房', name: '备用水池', type: '水池', status: '正常', temp: '-', current: '-', voltage: '-', liquid: '5.5米', liquidInput: '5.5', pressure: '-', door: '关闭', },
                        { room: 'B栋生活供水泵房', name: '集水井1', type: '集水井', status: '正常', temp: '-', current: '-', voltage: '-', liquid: '3.5米', liquidInput: '3.5', pressure: '-', door: '关闭', pumps: [
                            { name: '集水井水泵1', status: '启动', mode: '自动', temp: '31℃', noise: '41dB', current: '4.8A', voltage: '380V' }
                        ]},
                        { room: 'B栋生活供水泵房', name: '管网压力', type: '压力', status: '正常', temp: '27℃', current: '-', voltage: '-', liquid: '-', pressure: '7.8MPa', pressureInput: '7.8', time: '2024-06-01 10:40' },
                        { room: 'B栋生活供水泵房', name: '环境', type: '环境', status: '正常', temp: '40℃', current: '-', voltage: '-', liquid: '-', pressure: '-', waterLeak: false, noise: '50dB', humidity: '80%', },
                        { room: 'A栋生活供水泵房', name: '集水井2', type: '集水井', status: '正常', temp: '-', current: '-', voltage: '-', liquid: '5.5米', liquidInput: '5.5', pressure: '-', door: '关闭', pumps: [
                            { name: '集水井2水泵1', status: '启动', mode: '自动', temp: '33℃', noise: '39dB', current: '5.2A', voltage: '380V' },
                            { name: '集水井2水泵2', status: '停止', mode: '手动', temp: '29℃', noise: '41dB', current: '0A', voltage: '380V' }
                        ]},
                        { room: 'B栋生活供水泵房', name: '集水井2', type: '集水井', status: '正常', temp: '-', current: '-', voltage: '-', liquid: '4.8米', liquidInput: '4.8', pressure: '-', door: '关闭', pumps: [
                            { name: '集水井2水泵1', status: '启动', mode: '自动', temp: '32℃', noise: '40dB', current: '4.9A', voltage: '380V' },
                            { name: '集水井2水泵2', status: '停止', mode: '手动', temp: '28℃', noise: '42dB', current: '0A', voltage: '380V' }
                        ]},
                    ],
                    alerts: [
                        { room: 'A栋生活供水泵房', device: '水泵1', sensorName: '水泵温度传感器A', type: '水泵温度过高，当前温度85℃，超过设定阈值80℃', status: '未处理', time: '2024-06-01 10:30' },
                        { room: 'A栋生活供水泵房', device: '管网压力', sensorName: '压力传感器A', type: '管网压力异常，当前压力0.3MPa，低于正常范围0.5-1.0MPa', status: '未处理', time: '2024-05-30 09:10' },
                        { room: 'B栋生活供水泵房', device: '水泵1', sensorName: '水泵电流传感器B', type: '水泵电流过载，当前电流45A，超过额定电流40A', status: '未处理', time: '2024-06-01 11:00' },
                        { room: 'A栋生活供水泵房', device: '主水箱', sensorName: '液位传感器A', type: '水箱液位过低，当前液位1.2米，低于安全液位2.0米', status: '已处理', time: '2024-05-31 16:20' },
                        { room: 'B栋生活供水泵房', device: '主水箱', sensorName: '液位传感器B', type: '水箱液位异常，当前液位8.5米，超过高液位报警值8.0米', status: '已处理', time: '2024-05-31 17:20' },
                        { room: 'A栋生活供水泵房', device: '环境', sensorName: '温度传感器A', type: '环境温度过高，当前温度42℃，超过设定阈值40℃', status: '已处理', time: '2024-05-29 14:30' },
                        { room: 'B栋生活供水泵房', device: '环境', sensorName: '湿度传感器B', type: '环境湿度过高，当前湿度85%，超过设定阈值80%', status: '已处理', time: '2024-05-28 09:15' },
                    ],
                    pointMarkers: {
                        'A栋生活供水泵房': [
                            { device: '水泵1', type: '水泵', x: 20, y: 60 },
                            { device: '主水箱', type: '水箱', x: 60, y: 30 },
                            { device: '集水井1', type: '集水井', x: 80, y: 80 },
                            { device: '管网压力', type: '压力', x: 40, y: 50 },
                            { device: '备用水池', type: '水池', x: 70, y: 70 }
                        ],
                        'B栋生活供水泵房': [
                            { device: '水泵1', type: '水泵', x: 30, y: 50 },
                            { device: '主水箱', type: '水箱', x: 70, y: 40 },
                            { device: '集水井1', type: '集水井', x: 60, y: 80 },
                            { device: '管网压力', type: '压力', x: 50, y: 60 },
                            { device: '备用水池', type: '水池', x: 80, y: 60 }
                        ]
                    },
                    bindDialogVisible: false,
                    bindForm: {
                        name: '',
                        pumps: [],
                        pressures: [],
                        envs: [],
                        tanks: [],
                        wells: [],
                        pressureDevices: [],
                        envDevice: null,
                        envConfig: {
                            noiseWarning: 50,
                            noiseDanger: 70,
                            tempWarning: 35,
                            tempDanger: 45,
                            humidityWarning: 75,
                            humidityDanger: 80
                        },
                        tankDevices: [],
                        wellDevices: []
                    },
                    allPumps: ['水泵1', '水泵2', '水泵3'],
                    allPressures: ['管网压力1', '管网压力2'],
                    allTanks: ['主水箱', '备用水池'],
                    allWells: ['集水井1', '集水井2'],
                    allSensors: ['水浸传感器A', '水浸传感器B', '噪音传感器A', '温度传感器A', '温度传感器B', '湿度传感器A', '湿度传感器B'],
                    pointDialogVisible: false,
                    pointBgMode: 'image',
                    pointBgUrl: '',
                    pointBgColor: '#f5f7fa',
                    pointDevices: [],
                    deviceImages: {
                        '水泵1': 'el-icon-s-platform',
                        '水泵2': 'el-icon-s-platform',
                        '主水箱': 'el-icon-box',
                        '备用水池': 'el-icon-box',
                        '集水井1': 'el-icon-coin',
                        '管网压力': 'el-icon-data-line',
                        '环境': 'el-icon-sunny',
                    },
                    dashboardRoom: '',
                    dashboardPeriod: 'day',
                    dashboardTank: '主水箱',
                    dashboardTanks: ['主水箱', '备用水池'],
                    dashboardPressure: '管网压力1',
                    dashboardPressures: ['管网压力1', '管网压力2', '管网压力3', '管网压力4', '管网压力5'],
                    selectedDevice: null,
                    selectedDeviceType: '',
                    selectedPressureDevice: null,
                    selectedTankDevice: null,
                    selectedWellDevice: null,
                    availablePressureDevices: [
                        { id: '管网压力1', name: '管网压力1', description: '主供水管网压力监测设备' },
                        { id: '管网压力2', name: '管网压力2', description: '副供水管网压力监测设备' },
                        { id: '管网压力3', name: '管网压力3', description: '消防管网压力监测设备' },
                        { id: '管网压力4', name: '管网压力4', description: '工业用水管网压力监测设备' },
                        { id: '管网压力5', name: '管网压力5', description: '循环水系统压力监测设备' }
                    ],
                    availableEnvDevices: [
                        { id: 'env1', name: '环境监测设备A', description: 'A栋环境监测设备' },
                        { id: 'env2', name: '环境监测设备B', description: 'B栋环境监测设备' }
                    ],
                    availableTankDevices: [
                        { id: 'tank1', name: '主水箱', description: '主供水水箱' },
                        { id: 'tank2', name: '备用水池', description: '备用水池' }
                    ],
                    availableWellDevices: [
                        { id: 'well1', name: '集水井1', description: '主集水井' },
                        { id: 'well2', name: '集水井2', description: '备用集水井' }
                    ],
                    pressureOptions: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                    liquidOptions: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                    // 图表演示数据
                    liquidChartData: {
                        day: [3.2, 3.5, 3.8, 4.1, 4.3, 4.6, 4.8, 5.1, 5.3, 5.6, 5.8, 6.1, 6.3, 6.5, 6.8, 7.0, 7.2, 7.5, 7.7, 7.9, 8.1, 8.3, 8.5, 8.7],
                        week: [3.5, 4.2, 5.1, 6.3, 7.8, 6.9, 5.4],
                        month: [3.2, 3.8, 4.5, 5.2, 6.1, 6.8, 7.5, 8.2, 7.9, 7.3, 6.8, 6.2, 5.7, 5.1, 4.6, 4.2, 3.9, 4.3, 4.8, 5.4, 6.1, 6.7, 7.3, 7.9, 8.4, 7.8, 7.2, 6.6, 6.1, 5.5]
                    },
                    pressureChartData: {
                        day: [4.2, 4.5, 4.8, 5.1, 5.3, 5.6, 5.8, 6.1, 6.3, 6.5, 6.7, 6.9, 7.1, 7.3, 7.5, 7.7, 7.9, 8.1, 8.3, 8.5, 8.7, 8.9, 9.1, 9.3],
                        week: [4.5, 5.2, 6.1, 7.3, 6.8, 5.9, 5.1],
                        month: [4.2, 4.8, 5.5, 6.2, 7.1, 6.8, 6.5, 6.2, 5.9, 5.6, 5.3, 5.0, 4.7, 4.4, 4.1, 4.3, 4.6, 4.9, 5.2, 5.5, 5.8, 6.1, 6.4, 6.7, 7.0, 6.7, 6.4, 6.1, 5.8, 5.5]
                    }
                }
            },
            computed: {
                filteredDevices() {
                    return this.devices.filter(d => d.room === this.selectedRoom);
                },
                filteredAlerts() {
                    return this.alerts.filter(a => a.room === this.selectedRoom && a.status === '未处理');
                }
            },
            watch: {
                activeTab(val) {
                    if (val === 'dashboard') {
                        this.$nextTick(() => {
                            this.initDashboard();
                        });
                    }
                },
                dashboardRoom() {
                    this.updateAlarmStats();
                    this.renderLiquidChart();
                    this.renderPressureChart();
                },
                dashboardPeriod() {
                    this.renderLiquidChart();
                    this.renderPressureChart();
                }
            },
            mounted() {
                this.dashboardRoom = this.rooms[0]?.name || '';
                this.selectedRoom = this.rooms[0]?.name || '';
                this.$nextTick(() => {
                    this.initDashboard();
                });
                this.animateDashboardNumbers();
            },
            methods: {
                getPressureValue(pressure) {
                    const numValue = parseFloat(pressure);
                    if (isNaN(numValue)) return 0;
                    return Math.round(numValue);
                },
                getPressurePercentage(pressure) {
                    const value = this.getPressureValue(pressure);
                    const clampedValue = Math.max(0, Math.min(10, value));
                    return (clampedValue / 10) * 100;
                },
                getLiquidValue(liquid) {
                    const numValue = parseFloat(liquid);
                    if (isNaN(numValue)) return 0;
                    return Math.round(numValue);
                },
                getLiquidPercentage(liquid) {
                    const value = this.getLiquidValue(liquid);
                    const clampedValue = Math.max(0, Math.min(10, value));
                    return (clampedValue / 10) * 100;
                },
                getPressureStatusColor(value, deviceName) {
                    const numValue = parseFloat(value);
                    if (isNaN(numValue)) return 'info';
                    if (numValue >= 0 && numValue <= 2) return 'danger';
                    if (numValue > 2 && numValue <= 4) return 'warning';
                    if (numValue > 4 && numValue <= 6) return 'success';
                    if (numValue > 6 && numValue <= 8) return 'warning';
                    if (numValue > 8 && numValue <= 10) return 'danger';
                    return 'info';
                },
                getPressureStatusText(value, deviceName) {
                    const numValue = parseFloat(value);
                    if (isNaN(numValue)) return '无效';
                    if (numValue >= 0 && numValue <= 2) return '超低压';
                    if (numValue > 2 && numValue <= 4) return '低压';
                    if (numValue > 4 && numValue <= 6) return '正常';
                    if (numValue > 6 && numValue <= 8) return '高压';
                    if (numValue > 8 && numValue <= 10) return '超高压';
                    return '未知';
                },
                getNoiseStatusColor(noise) {
                    const numValue = parseFloat(noise);
                    if (isNaN(numValue)) return 'info';
                    const warningThreshold = this.bindForm.envConfig?.noiseWarning || 50;
                    const dangerThreshold = this.bindForm.envConfig?.noiseDanger || 70;
                    if (numValue >= 0 && numValue <= warningThreshold) return 'success';
                    if (numValue > warningThreshold && numValue <= dangerThreshold) return 'warning';
                    if (numValue > dangerThreshold) return 'danger';
                    return 'info';
                },
                getNoiseStatusText(noise) {
                    const numValue = parseFloat(noise);
                    if (isNaN(numValue)) return '无效';
                    const warningThreshold = this.bindForm.envConfig?.noiseWarning || 50;
                    const dangerThreshold = this.bindForm.envConfig?.noiseDanger || 70;
                    if (numValue >= 0 && numValue <= warningThreshold) return '正常';
                    if (numValue > warningThreshold && numValue <= dangerThreshold) return '警告';
                    if (numValue > dangerThreshold) return '告警';
                    return '未知';
                },
                getTempStatusColor(temp) {
                    const numValue = parseFloat(temp);
                    if (isNaN(numValue)) return 'info';
                    const warningThreshold = this.bindForm.envConfig?.tempWarning || 35;
                    const dangerThreshold = this.bindForm.envConfig?.tempDanger || 45;
                    if (numValue >= 20 && numValue < warningThreshold) return 'success';
                    if (numValue >= warningThreshold && numValue < dangerThreshold) return 'warning';
                    if (numValue >= dangerThreshold) return 'danger';
                    return 'info';
                },
                getTempStatusText(temp) {
                    const numValue = parseFloat(temp);
                    if (isNaN(numValue)) return '无效';
                    const warningThreshold = this.bindForm.envConfig?.tempWarning || 35;
                    const dangerThreshold = this.bindForm.envConfig?.tempDanger || 45;
                    if (numValue >= 20 && numValue < warningThreshold) return '正常';
                    if (numValue >= warningThreshold && numValue < dangerThreshold) return '预警';
                    if (numValue >= dangerThreshold) return '告警';
                    return '未知';
                },
                getHumidityStatusColor(humidity) {
                    const numValue = parseFloat(humidity);
                    if (isNaN(numValue)) return 'info';
                    const warningThreshold = this.bindForm.envConfig?.humidityWarning || 75;
                    const dangerThreshold = this.bindForm.envConfig?.humidityDanger || 80;
                    if (numValue >= 60 && numValue < warningThreshold) return 'success';
                    if (numValue >= warningThreshold && numValue < dangerThreshold) return 'warning';
                    if (numValue >= dangerThreshold) return 'danger';
                    return 'info';
                },
                getHumidityStatusText(humidity) {
                    const numValue = parseFloat(humidity);
                    if (isNaN(numValue)) return '无效';
                    const warningThreshold = this.bindForm.envConfig?.humidityWarning || 75;
                    const dangerThreshold = this.bindForm.envConfig?.humidityDanger || 80;
                    if (numValue >= 60 && numValue < warningThreshold) return '正常';
                    if (numValue >= warningThreshold && numValue < dangerThreshold) return '预警';
                    if (numValue >= dangerThreshold) return '告警';
                    return '未知';
                },
                getLiquidStatusColor(liquid, deviceName) {
                    const numValue = parseFloat(liquid);
                    if (isNaN(numValue)) return 'info';
                    if (numValue >= 0 && numValue <= 2) return 'danger';
                    if (numValue > 2 && numValue <= 4) return 'warning';
                    if (numValue > 4 && numValue <= 8) return 'success';
                    if (numValue > 8 && numValue <= 9) return 'warning';
                    if (numValue > 9 && numValue <= 10) return 'danger';
                    return 'info';
                },
                getLiquidStatusText(liquid, deviceName) {
                    const numValue = parseFloat(liquid);
                    if (isNaN(numValue)) return '无效';
                    if (numValue >= 0 && numValue <= 2) return '超低';
                    if (numValue > 2 && numValue <= 4) return '低';
                    if (numValue > 4 && numValue <= 8) return '正常';
                    if (numValue > 8 && numValue <= 9) return '高';
                    if (numValue > 9 && numValue <= 10) return '超高';
                    return '未知';
                },
                getWellLiquidStatusColor(liquid, deviceName) {
                    const numValue = parseFloat(liquid);
                    if (isNaN(numValue)) return 'info';
                    if (numValue >= 0 && numValue <= 2) return 'danger';
                    if (numValue > 2 && numValue <= 4) return 'warning';
                    if (numValue > 4 && numValue <= 8) return 'success';
                    if (numValue > 8 && numValue <= 9) return 'warning';
                    if (numValue > 9 && numValue <= 10) return 'danger';
                    return 'info';
                },
                getWellLiquidStatusText(liquid, deviceName) {
                    const numValue = parseFloat(liquid);
                    if (isNaN(numValue)) return '无效';
                    if (numValue >= 0 && numValue <= 2) return '超低';
                    if (numValue > 2 && numValue <= 4) return '低';
                    if (numValue > 4 && numValue <= 8) return '正常';
                    if (numValue > 8 && numValue <= 9) return '高';
                    if (numValue > 9 && numValue <= 10) return '超高';
                    return '未知';
                },
                openBindDialog(room) {
                    this.bindForm.name = room.name;
                    this.bindDialogVisible = true;
                },
                openPointDialog(room) {
                    this.pointDevices = this.pointMarkers[room.name] || [];
                    this.pointDialogVisible = true;
                },
                selectDevice(marker) {
                    this.selectedDevice = marker;
                    this.selectedDeviceType = marker.type;
                },
                getDeviceData(deviceName) {
                    return this.filteredDevices.filter(d => d.name === deviceName);
                },
                getDeviceAlerts(deviceName) {
                    return this.filteredAlerts.filter(a => a.device === deviceName);
                },
                getDeviceAlertStatus(deviceName) {
                    return this.filteredAlerts.some(a => a.device === deviceName && a.status === '未处理');
                },
                getDeviceOfflineStatus(deviceName) {
                    return false;
                },
                handlePointBgUpload(file) {
                    this.pointBgUrl = URL.createObjectURL(file.raw);
                },
                saveBindInfo() {
                    this.$message.success('绑定信息保存成功');
                    this.bindDialogVisible = false;
                },
                savePointInfo() {
                    this.$message.success('点位配置保存成功');
                    this.pointDialogVisible = false;
                },
                showPressureDeviceSelector() {
                    const deviceList = this.availablePressureDevices.map((device, index) => 
                        `<div style="padding: 8px; border: 1px solid #DCDFE6; border-radius: 4px; margin-bottom: 8px; cursor: pointer; background: #F5F7FA;" onclick="window.selectPressureDevice(${index})">
                            <div style="font-weight: bold; color: #303133;">${device.name}</div>
                            <div style="font-size: 12px; color: #606266; margin-top: 4px;">${device.description}</div>
                        </div>`
                    ).join('');
                    
                    // 将设备列表存储到全局变量
                    window.availablePressureDevicesList = this.availablePressureDevices;
                    window.selectPressureDevice = (index) => {
                        window.selectedPressureDeviceIndex = index;
                        // 高亮选中的设备
                        const deviceElements = document.querySelectorAll('[onclick^="window.selectPressureDevice"]');
                        deviceElements.forEach((el, i) => {
                            if (i === index) {
                                el.style.background = '#409EFF';
                                el.style.color = 'white';
                            } else {
                                el.style.background = '#F5F7FA';
                                el.style.color = 'inherit';
                            }
                        });
                    };
                    
                    this.$msgbox({
                        title: '选择压力设备',
                        dangerouslyUseHTMLString: true,
                        message: `<p>请选择要添加的管网压力设备：</p><div style="margin-top: 10px;">${deviceList}</div>`,
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm' && window.selectedPressureDeviceIndex !== undefined) {
                                const selectedDevice = window.availablePressureDevicesList[window.selectedPressureDeviceIndex];
                                this.addPressureDevice(selectedDevice);
                                window.selectedPressureDeviceIndex = undefined;
                                window.availablePressureDevicesList = undefined;
                                window.selectPressureDevice = undefined;
                                done();
                            } else if (action === 'cancel') {
                                window.selectedPressureDeviceIndex = undefined;
                                window.availablePressureDevicesList = undefined;
                                window.selectPressureDevice = undefined;
                                done();
                            } else {
                                this.$message.warning('请先选择一个设备');
                            }
                        }
                    });
                },
                addPressureDevice(device) {
                    this.bindForm.pressureDevices.push({
                        name: device.name,
                        minValue: '0',
                        maxValue: '10',
                        unit: 'MPa',
                        warningRanges: {
                            ultraLow: '0 - 2',
                            low: '2 - 4',
                            normal: '4 - 6',
                            high: '6 - 8',
                            ultraHigh: '8 - 10'
                        },
                        showRefreshButton: false,
                        showWarningRefreshButton: false
                    });
                },
                removePressureDevice(index) {
                    this.bindForm.pressureDevices.splice(index, 1);
                },
                showTankDeviceSelector() {
                    const deviceList = this.availableTankDevices.map((device, index) => 
                        `<div style="padding: 8px; border: 1px solid #DCDFE6; border-radius: 4px; margin-bottom: 8px; cursor: pointer; background: #F5F7FA;" onclick="window.selectTankDevice(${index})">
                            <div style="font-weight: bold; color: #303133;">${device.name}</div>
                            <div style="font-size: 12px; color: #606266; margin-top: 4px;">${device.description}</div>
                        </div>`
                    ).join('');
                    
                    // 将设备列表存储到全局变量
                    window.availableTankDevicesList = this.availableTankDevices;
                    window.selectTankDevice = (index) => {
                        window.selectedTankDeviceIndex = index;
                        // 高亮选中的设备
                        const deviceElements = document.querySelectorAll('[onclick^="window.selectTankDevice"]');
                        deviceElements.forEach((el, i) => {
                            if (i === index) {
                                el.style.background = '#409EFF';
                                el.style.color = 'white';
                            } else {
                                el.style.background = '#F5F7FA';
                                el.style.color = 'inherit';
                            }
                        });
                    };
                    
                    this.$msgbox({
                        title: '选择水箱/水池设备',
                        dangerouslyUseHTMLString: true,
                        message: `<p>请选择要添加的水箱/水池设备：</p><div style="margin-top: 10px;">${deviceList}</div>`,
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm' && window.selectedTankDeviceIndex !== undefined) {
                                const selectedDevice = window.availableTankDevicesList[window.selectedTankDeviceIndex];
                                this.addTankDevice(selectedDevice);
                                window.selectedTankDeviceIndex = undefined;
                                window.availableTankDevicesList = undefined;
                                window.selectTankDevice = undefined;
                                done();
                            } else if (action === 'cancel') {
                                window.selectedTankDeviceIndex = undefined;
                                window.availableTankDevicesList = undefined;
                                window.selectTankDevice = undefined;
                                done();
                            } else {
                                this.$message.warning('请先选择一个设备');
                            }
                        }
                    });
                },
                addTankDevice(device) {
                    this.bindForm.tankDevices.push({
                        name: device.name,
                        minValue: '0',
                        maxValue: '10',
                        unit: '米',
                        warningRanges: {
                            ultraLow: '0 - 2',
                            low: '2 - 4',
                            normal: '4 - 6',
                            high: '6 - 8',
                            ultraHigh: '8 - 10'
                        },
                        showRefreshButton: false,
                        showWarningRefreshButton: false
                    });
                },
                removeTankDevice(index) {
                    this.bindForm.tankDevices.splice(index, 1);
                },
                showWellDeviceSelector() {
                    const deviceList = this.availableWellDevices.map((device, index) => 
                        `<div style="padding: 8px; border: 1px solid #DCDFE6; border-radius: 4px; margin-bottom: 8px; cursor: pointer; background: #F5F7FA;" onclick="window.selectWellDevice(${index})">
                            <div style="font-weight: bold; color: #303133;">${device.name}</div>
                            <div style="font-size: 12px; color: #606266; margin-top: 4px;">${device.description}</div>
                        </div>`
                    ).join('');
                    
                    // 将设备列表存储到全局变量
                    window.availableWellDevicesList = this.availableWellDevices;
                    window.selectWellDevice = (index) => {
                        window.selectedWellDeviceIndex = index;
                        // 高亮选中的设备
                        const deviceElements = document.querySelectorAll('[onclick^="window.selectWellDevice"]');
                        deviceElements.forEach((el, i) => {
                            if (i === index) {
                                el.style.background = '#409EFF';
                                el.style.color = 'white';
                            } else {
                                el.style.background = '#F5F7FA';
                                el.style.color = 'inherit';
                            }
                        });
                    };
                    
                    this.$msgbox({
                        title: '选择集水井设备',
                        dangerouslyUseHTMLString: true,
                        message: `<p>请选择要添加的集水井设备：</p><div style="margin-top: 10px;">${deviceList}</div>`,
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm' && window.selectedWellDeviceIndex !== undefined) {
                                const selectedDevice = window.availableWellDevicesList[window.selectedWellDeviceIndex];
                                this.addWellDevice(selectedDevice);
                                window.selectedWellDeviceIndex = undefined;
                                window.availableWellDevicesList = undefined;
                                window.selectWellDevice = undefined;
                                done();
                            } else if (action === 'cancel') {
                                window.selectedWellDeviceIndex = undefined;
                                window.availableWellDevicesList = undefined;
                                window.selectWellDevice = undefined;
                                done();
                            } else {
                                this.$message.warning('请先选择一个设备');
                            }
                        }
                    });
                },
                addWellDevice(device) {
                    this.bindForm.wellDevices.push({
                        name: device.name,
                        minValue: '0',
                        maxValue: '10',
                        unit: '米',
                        warningRanges: {
                            ultraLow: '0 - 2',
                            low: '2 - 4',
                            normal: '4 - 6',
                            high: '6 - 8',
                            ultraHigh: '8 - 10'
                        },
                        showRefreshButton: false,
                        showWarningRefreshButton: false
                    });
                },
                removeWellDevice(index) {
                    this.bindForm.wellDevices.splice(index, 1);
                },
                onEffectiveRangeChange(index) {
                    const device = this.bindForm.pressureDevices[index];
                    if (device.minValue && device.maxValue) {
                        this.$set(device, 'showRefreshButton', true);
                    } else {
                        this.$set(device, 'showRefreshButton', false);
                    }
                },
                refreshEffectiveRange(index) {
                    const device = this.bindForm.pressureDevices[index];
                    const minValue = parseFloat(device.minValue);
                    const maxValue = parseFloat(device.maxValue);
                    
                    if (isNaN(minValue) || isNaN(maxValue) || minValue >= maxValue) {
                        this.$message.error('请输入有效的范围值');
                        return;
                    }
                    
                    const range = maxValue - minValue;
                    const step = range / 5;
                    
                    device.warningRanges = {
                        ultraLow: `${minValue.toFixed(1)} - ${(minValue + step).toFixed(1)}`,
                        low: `${(minValue + step).toFixed(1)} - ${(minValue + step * 2).toFixed(1)}`,
                        normal: `${(minValue + step * 2).toFixed(1)} - ${(minValue + step * 3).toFixed(1)}`,
                        high: `${(minValue + step * 3).toFixed(1)} - ${(minValue + step * 4).toFixed(1)}`,
                        ultraHigh: `${(minValue + step * 4).toFixed(1)} - ${maxValue.toFixed(1)}`
                    };
                    
                    // 更新值1和值6的输入框
                    const value1Input = document.getElementById(`warningValue1_${index}`);
                    const value6Input = document.getElementById(`warningValue6_${index}`);
                    if (value1Input) value1Input.value = minValue.toFixed(1);
                    if (value6Input) value6Input.value = maxValue.toFixed(1);
                    
                    this.$set(device, 'showRefreshButton', false);
                    this.$message.success('有效范围已刷新，预警范围已更新');
                },
                onWarningValueInput(index) {
                    const device = this.bindForm.pressureDevices[index];
                    const value2 = document.getElementById(`warningValue2_${index}`).value;
                    const value3 = document.getElementById(`warningValue3_${index}`).value;
                    const value4 = document.getElementById(`warningValue4_${index}`).value;
                    const value5 = document.getElementById(`warningValue5_${index}`).value;
                    
                    if (value2 && value3 && value4 && value5) {
                        this.$set(device, 'showWarningRefreshButton', true);
                    } else {
                        this.$set(device, 'showWarningRefreshButton', false);
                    }
                },
                refreshWarningRanges(index) {
                    const device = this.bindForm.pressureDevices[index];
                    const value1 = parseFloat(document.getElementById(`warningValue1_${index}`).value);
                    const value2 = parseFloat(document.getElementById(`warningValue2_${index}`).value);
                    const value3 = parseFloat(document.getElementById(`warningValue3_${index}`).value);
                    const value4 = parseFloat(document.getElementById(`warningValue4_${index}`).value);
                    const value5 = parseFloat(document.getElementById(`warningValue5_${index}`).value);
                    const value6 = parseFloat(document.getElementById(`warningValue6_${index}`).value);
                    
                    if (isNaN(value1) || isNaN(value2) || isNaN(value3) || isNaN(value4) || isNaN(value5) || isNaN(value6)) {
                        this.$message.error('请输入有效的数值');
                        return;
                    }
                    
                    if (value1 >= value2 || value2 >= value3 || value3 >= value4 || value4 >= value5 || value5 >= value6) {
                        this.$message.error('数值必须按照递增顺序排列');
                        return;
                    }
                    
                    device.warningRanges = {
                        ultraLow: `${value1.toFixed(1)} - ${value2.toFixed(1)}`,
                        low: `${value2.toFixed(1)} - ${value3.toFixed(1)}`,
                        normal: `${value3.toFixed(1)} - ${value4.toFixed(1)}`,
                        high: `${value4.toFixed(1)} - ${value5.toFixed(1)}`,
                        ultraHigh: `${value5.toFixed(1)} - ${value6.toFixed(1)}`
                    };
                    
                    this.$set(device, 'showWarningRefreshButton', false);
                    this.$message.success('数值符合标准，预警范围已更新');
                },
                onTankRangeChange(index) {
                    const device = this.bindForm.tankDevices[index];
                    if (device.minValue && device.maxValue) {
                        this.$set(device, 'showRefreshButton', true);
                    } else {
                        this.$set(device, 'showRefreshButton', false);
                    }
                },
                refreshTankEffectiveRange(index) {
                    const device = this.bindForm.tankDevices[index];
                    const minValue = parseFloat(device.minValue);
                    const maxValue = parseFloat(device.maxValue);
                    
                    if (isNaN(minValue) || isNaN(maxValue) || minValue >= maxValue) {
                        this.$message.error('请输入有效的范围值');
                        return;
                    }
                    
                    const range = maxValue - minValue;
                    const step = range / 5;
                    
                    device.warningRanges = {
                        ultraLow: `${minValue.toFixed(1)} - ${(minValue + step).toFixed(1)}`,
                        low: `${(minValue + step).toFixed(1)} - ${(minValue + step * 2).toFixed(1)}`,
                        normal: `${(minValue + step * 2).toFixed(1)} - ${(minValue + step * 3).toFixed(1)}`,
                        high: `${(minValue + step * 3).toFixed(1)} - ${(minValue + step * 4).toFixed(1)}`,
                        ultraHigh: `${(minValue + step * 4).toFixed(1)} - ${maxValue.toFixed(1)}`
                    };
                    
                    // 更新值1和值6的输入框
                    const value1Input = document.getElementById(`tankWarningValue1_${index}`);
                    const value6Input = document.getElementById(`tankWarningValue6_${index}`);
                    if (value1Input) value1Input.value = minValue.toFixed(1);
                    if (value6Input) value6Input.value = maxValue.toFixed(1);
                    
                    this.$set(device, 'showRefreshButton', false);
                    this.$message.success('有效范围已刷新，预警范围已更新');
                },
                onTankWarningValueInput(index) {
                    const device = this.bindForm.tankDevices[index];
                    const value2 = document.getElementById(`tankWarningValue2_${index}`).value;
                    const value3 = document.getElementById(`tankWarningValue3_${index}`).value;
                    const value4 = document.getElementById(`tankWarningValue4_${index}`).value;
                    const value5 = document.getElementById(`tankWarningValue5_${index}`).value;
                    
                    if (value2 && value3 && value4 && value5) {
                        this.$set(device, 'showWarningRefreshButton', true);
                    } else {
                        this.$set(device, 'showWarningRefreshButton', false);
                    }
                },
                refreshTankWarningRanges(index) {
                    const device = this.bindForm.tankDevices[index];
                    const value1 = parseFloat(document.getElementById(`tankWarningValue1_${index}`).value);
                    const value2 = parseFloat(document.getElementById(`tankWarningValue2_${index}`).value);
                    const value3 = parseFloat(document.getElementById(`tankWarningValue3_${index}`).value);
                    const value4 = parseFloat(document.getElementById(`tankWarningValue4_${index}`).value);
                    const value5 = parseFloat(document.getElementById(`tankWarningValue5_${index}`).value);
                    const value6 = parseFloat(document.getElementById(`tankWarningValue6_${index}`).value);
                    
                    if (isNaN(value1) || isNaN(value2) || isNaN(value3) || isNaN(value4) || isNaN(value5) || isNaN(value6)) {
                        this.$message.error('请输入有效的数值');
                        return;
                    }
                    
                    if (value1 >= value2 || value2 >= value3 || value3 >= value4 || value4 >= value5 || value5 >= value6) {
                        this.$message.error('数值必须按照递增顺序排列');
                        return;
                    }
                    
                    device.warningRanges = {
                        ultraLow: `${value1.toFixed(1)} - ${value2.toFixed(1)}`,
                        low: `${value2.toFixed(1)} - ${value3.toFixed(1)}`,
                        normal: `${value3.toFixed(1)} - ${value4.toFixed(1)}`,
                        high: `${value4.toFixed(1)} - ${value5.toFixed(1)}`,
                        ultraHigh: `${value5.toFixed(1)} - ${value6.toFixed(1)}`
                    };
                    
                    this.$set(device, 'showWarningRefreshButton', false);
                    this.$message.success('数值符合标准，预警范围已更新');
                },
                onWellRangeChange(index) {
                    const device = this.bindForm.wellDevices[index];
                    if (device.minValue && device.maxValue) {
                        this.$set(device, 'showRefreshButton', true);
                    } else {
                        this.$set(device, 'showRefreshButton', false);
                    }
                },
                refreshWellEffectiveRange(index) {
                    const device = this.bindForm.wellDevices[index];
                    const minValue = parseFloat(device.minValue);
                    const maxValue = parseFloat(device.maxValue);
                    
                    if (isNaN(minValue) || isNaN(maxValue) || minValue >= maxValue) {
                        this.$message.error('请输入有效的范围值');
                        return;
                    }
                    
                    const range = maxValue - minValue;
                    const step = range / 5;
                    
                    device.warningRanges = {
                        ultraLow: `${minValue.toFixed(1)} - ${(minValue + step).toFixed(1)}`,
                        low: `${(minValue + step).toFixed(1)} - ${(minValue + step * 2).toFixed(1)}`,
                        normal: `${(minValue + step * 2).toFixed(1)} - ${(minValue + step * 3).toFixed(1)}`,
                        high: `${(minValue + step * 3).toFixed(1)} - ${(minValue + step * 4).toFixed(1)}`,
                        ultraHigh: `${(minValue + step * 4).toFixed(1)} - ${maxValue.toFixed(1)}`
                    };
                    
                    // 更新值1和值6的输入框
                    const value1Input = document.getElementById(`wellWarningValue1_${index}`);
                    const value6Input = document.getElementById(`wellWarningValue6_${index}`);
                    if (value1Input) value1Input.value = minValue.toFixed(1);
                    if (value6Input) value6Input.value = maxValue.toFixed(1);
                    
                    this.$set(device, 'showRefreshButton', false);
                    this.$message.success('有效范围已刷新，预警范围已更新');
                },
                onWellWarningValueInput(index) {
                    const device = this.bindForm.wellDevices[index];
                    const value2 = document.getElementById(`wellWarningValue2_${index}`).value;
                    const value3 = document.getElementById(`wellWarningValue3_${index}`).value;
                    const value4 = document.getElementById(`wellWarningValue4_${index}`).value;
                    const value5 = document.getElementById(`wellWarningValue5_${index}`).value;
                    
                    if (value2 && value3 && value4 && value5) {
                        this.$set(device, 'showWarningRefreshButton', true);
                    } else {
                        this.$set(device, 'showWarningRefreshButton', false);
                    }
                },
                refreshWellWarningRanges(index) {
                    const device = this.bindForm.wellDevices[index];
                    const value1 = parseFloat(document.getElementById(`wellWarningValue1_${index}`).value);
                    const value2 = parseFloat(document.getElementById(`wellWarningValue2_${index}`).value);
                    const value3 = parseFloat(document.getElementById(`wellWarningValue3_${index}`).value);
                    const value4 = parseFloat(document.getElementById(`wellWarningValue4_${index}`).value);
                    const value5 = parseFloat(document.getElementById(`wellWarningValue5_${index}`).value);
                    const value6 = parseFloat(document.getElementById(`wellWarningValue6_${index}`).value);
                    
                    if (isNaN(value1) || isNaN(value2) || isNaN(value3) || isNaN(value4) || isNaN(value5) || isNaN(value6)) {
                        this.$message.error('请输入有效的数值');
                        return;
                    }
                    
                    if (value1 >= value2 || value2 >= value3 || value3 >= value4 || value4 >= value5 || value5 >= value6) {
                        this.$message.error('数值必须按照递增顺序排列');
                        return;
                    }
                    
                    device.warningRanges = {
                        ultraLow: `${value1.toFixed(1)} - ${value2.toFixed(1)}`,
                        low: `${value2.toFixed(1)} - ${value3.toFixed(1)}`,
                        normal: `${value3.toFixed(1)} - ${value4.toFixed(1)}`,
                        high: `${value4.toFixed(1)} - ${value5.toFixed(1)}`,
                        ultraHigh: `${value5.toFixed(1)} - ${value6.toFixed(1)}`
                    };
                    
                    this.$set(device, 'showWarningRefreshButton', false);
                    this.$message.success('数值符合标准，预警范围已更新');
                },
                updatePressureFromSelect(device) {
                    // 下拉列表选择后更新压力值
                    const selectedValue = parseFloat(device.pressureInput);
                    if (!isNaN(selectedValue)) {
                        device.pressure = selectedValue + 'MPa';
                    }
                },
                updateLiquidFromSelect(device) {
                    // 下拉列表选择后更新液位值
                    const selectedValue = parseFloat(device.liquidInput);
                    if (!isNaN(selectedValue)) {
                        device.liquid = selectedValue + '米';
                    }
                },
                updateWellLiquidFromSelect(well) {
                    // 下拉列表选择后更新液位值
                    const selectedValue = parseFloat(well.liquidInput);
                    if (!isNaN(selectedValue)) {
                        well.liquid = selectedValue + '米';
                    }
                },
                handleAlertDoubleClick(row) {
                    // 双击告警行，弹出提示并转跳到告警中心
                    this.$msgbox({
                        title: '告警处理',
                        message: `检测到告警：${row.type}\n\n需要转跳到告警中心的告警处理模块进行处理。\n\n是否立即转跳？`,
                        showCancelButton: true,
                        confirmButtonText: '立即转跳',
                        cancelButtonText: '取消',
                        type: 'warning',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm') {
                                // 转跳到告警中心的告警处理模块
                                this.jumpToAlarmCenter(row);
                                done();
                            } else {
                                done();
                            }
                        }
                    });
                },
                jumpToAlarmCenter(alert) {
                    // 转跳到告警中心的告警处理模块
                    this.$message({
                        message: `正在转跳到告警中心处理告警：${alert.device} - ${alert.type}`,
                        type: 'success',
                        duration: 3000
                    });
                    
                    // 这里可以添加实际的页面转跳逻辑
                    // 例如：window.location.href = '/alarm-center/process?alertId=' + alert.id;
                    // 或者使用路由：this.$router.push('/alarm-center/process');
                    
                    // 模拟转跳延迟
                    setTimeout(() => {
                        this.$message({
                            message: '已成功转跳到告警中心告警处理模块',
                            type: 'success',
                            duration: 2000
                        });
                    }, 1000);
                },
                // 数字动画效果
                animateNum(elementId, targetNum) {
                    const element = document.getElementById(elementId);
                    if (!element) return;
                    
                    const startNum = parseInt(element.textContent) || 0;
                    const duration = 1000; // 动画持续时间1秒
                    const startTime = Date.now();
                    
                    const animate = () => {
                        const currentTime = Date.now();
                        const elapsed = currentTime - startTime;
                        const progress = Math.min(elapsed / duration, 1);
                        
                        // 使用缓动函数
                        const easeOutQuart = 1 - Math.pow(1 - progress, 4);
                        const currentNum = Math.round(startNum + (targetNum - startNum) * easeOutQuart);
                        
                        element.textContent = currentNum;
                        
                        if (progress < 1) {
                            requestAnimationFrame(animate);
                        }
                    };
                    
                    animate();
                },
                // 更新告警统计
                updateAlarmStats() {
                    const total = this.alerts.length;
                    const unhandled = this.alerts.filter(a => a.status === '未处理').length;
                    const handled = this.alerts.filter(a => a.status === '已处理').length;
                    
                    this.animateNum('alarm-total', total);
                    this.animateNum('alarm-unhandled', unhandled);
                    this.animateNum('alarm-handled', handled);
                },
                // 更新指定机房的告警统计
                updateRoomAlarmStats(roomName) {
                    const roomAlerts = this.alerts.filter(a => a.room === roomName);
                    const total = roomAlerts.length;
                    const unhandled = roomAlerts.filter(a => a.status === '未处理').length;
                    const handled = roomAlerts.filter(a => a.status === '已处理').length;
                    
                    this.animateNum('alarm-total', total);
                    this.animateNum('alarm-unhandled', unhandled);
                    this.animateNum('alarm-handled', handled);
                },
                // 初始化仪表盘
                initDashboard() {
                    this.updateAlarmStats();
                    this.renderLiquidChart();
                    this.renderPressureChart();
                },
                // 数字动画效果
                animateDashboardNumbers() {
                    const total = this.alerts.length;
                    const unhandled = this.alerts.filter(a => a.status === '未处理').length;
                    const handled = this.alerts.filter(a => a.status === '已处理').length;
                    this.animateNum('alarm-total', total);
                    this.animateNum('alarm-unhandled', unhandled);
                    this.animateNum('alarm-handled', handled);
                },
                // 渲染水池液位变化图表
                renderLiquidChart() {
                    const chart = echarts.init(document.getElementById('liquid-chart'));
                    
                    // 根据时间周期生成数据点
                    let timeLabels, data;
                    if (this.dashboardPeriod === 'day') {
                        timeLabels = Array.from({length: 24}, (_, i) => i+1+':00');
                        data = Array.from({length: 24}, () => Math.round(2+Math.random()*6)); // 2-8米范围
                    } else if (this.dashboardPeriod === 'week') {
                        timeLabels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
                        data = Array.from({length: 7}, () => Math.round(2+Math.random()*6));
                    } else { // month
                        timeLabels = Array.from({length: 30}, (_, i) => i+1+'日');
                        data = Array.from({length: 30}, () => Math.round(2+Math.random()*6));
                    }
                    
                    chart.resize();
                    chart.setOption({
                        xAxis: { type: 'category', data: timeLabels, boundaryGap: false },
                        yAxis: { type: 'value', min: 0, max: 10, name: '液位(米)' },
                        series: [{
                            data,
                            type: 'line',
                            smooth: true,
                            areaStyle: { color: '#81c784' },
                            lineStyle: { color: '#2E7D32', width: 2 },
                            symbol: 'circle',
                            symbolSize: 6
                        }],
                        tooltip: { trigger: 'axis' },
                        grid: { left: 40, right: 20, top: 30, bottom: 30 },
                        title: { text: '', left: 'center', top: 0, textStyle: { fontSize: 14 } }
                    });
                },
                // 渲染管网压力变化图表
                renderPressureChart() {
                    const chart = echarts.init(document.getElementById('pressure-chart'));
                    
                    // 根据时间周期生成数据点
                    let timeLabels, data;
                    if (this.dashboardPeriod === 'day') {
                        timeLabels = Array.from({length: 24}, (_, i) => i+1+':00');
                        data = Array.from({length: 24}, () => Math.round(3+Math.random()*4)); // 3-7MPa范围
                    } else if (this.dashboardPeriod === 'week') {
                        timeLabels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
                        data = Array.from({length: 7}, () => Math.round(3+Math.random()*4));
                    } else { // month
                        timeLabels = Array.from({length: 30}, (_, i) => i+1+'日');
                        data = Array.from({length: 30}, () => Math.round(3+Math.random()*4));
                    }
                    
                    // 根据选择的管网压力设备调整数据范围
                    let dataRange = { min: 3, max: 7 }; // 默认范围
                    switch(this.dashboardPressure) {
                        case '管网压力1': // 主供水管网
                            dataRange = { min: 4, max: 8 };
                            break;
                        case '管网压力2': // 副供水管网
                            dataRange = { min: 3, max: 7 };
                            break;
                        case '管网压力3': // 消防管网
                            dataRange = { min: 5, max: 9 };
                            break;
                        case '管网压力4': // 工业用水管网
                            dataRange = { min: 2, max: 6 };
                            break;
                        case '管网压力5': // 循环水系统
                            dataRange = { min: 3, max: 6 };
                            break;
                    }
                    
                    // 重新生成数据，使用设备特定的范围
                    data = data.map(() => Math.round(dataRange.min + Math.random() * (dataRange.max - dataRange.min)));
                    
                    chart.resize();
                    chart.setOption({
                        xAxis: { type: 'category', data: timeLabels, boundaryGap: false },
                        yAxis: { type: 'value', min: 0, max: 10, name: '压力(MPa)' },
                        series: [{
                            data,
                            type: 'line',
                            smooth: true,
                            areaStyle: { color: '#64b5f6' },
                            lineStyle: { color: '#1565C0', width: 2 },
                            symbol: 'circle',
                            symbolSize: 6
                        }],
                        tooltip: { trigger: 'axis' },
                        grid: { left: 40, right: 20, top: 30, bottom: 30 },
                        title: { text: '', left: 'center', top: 0, textStyle: { fontSize: 14 } }
                    });
                }
            }
        });
    </script>
</body>
</html>